Receiving 'Function components cannot be given refs' error when applying 'react-input-mask' library to my 'react-form-hook' form component

Question

I'm currently lost on these two error messages I'm receiving. They began to occur when I added 'react-input-masks' library to my code. The code itself works as I expect it to, but I can't figure out why I'm receiving the following errors concerning refs (especially the first one).

My understanding was that my attempt at using refs within a functional component was the culprit and I attempted to fix it by wrapping React.forwardRef() to my component, but this did nothing to fix the problem. I've tried methods to include refs into the controller and InputMask components, but this has not changed the refs. I'm not even sure if the controller is the issue if not for the error message mentioning it.

Below is my code which I have cut down to what seems to be the area of concern. Everything outside of this worked error-free.

import React, {useRef} from 'react';
import { useForm, Controller } from "react-hook-form";
import InputMask from "react-input-mask";


const CreateAccountForm = React.forwardRef((props, ref) => {
  const {register, formState: { errors }, handleSubmit, watch, control} = useForm();
  const password = useRef({});
  password.current = watch("password", "");

  const onSubmit = (register) => {
    console.log(register)
  };

  return (
    
    <div className='sign-in-form'>
        <label> Date of Birth
          <Controller
            control={control}
            render={({ field: { ref, ...rest} }) => (
              <InputMask
                {...rest}
                mask="99/99/9999"
                placeholder="mm/dd/yyyy"
                inputRef={ref}
              />
            )}
            {...register('DOB', 
            { 
              required: 'date of birth missing',
              pattern: 
                {
                  value: /^\d{1,2}\/?\d{1,2}\/?\d{4}$/,
                  message: 'Invalid Date' 
                },
            })}
            name="DOB"
            defaultValue="" 
            type="date"
            />
        </label>
        <button type="submit">Create Account</button>
      </form>
    </div>

  )
})

export default CreateAccountForm;

Thanks for any help in advance. I tried looking up solutions but struggled with the answers provided elsewhere.

*Edit As requested, added the error messages as text below.

index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef`.
    at Controller (http://localhost:3000/static/js/vendors~main.chunk.js:30829:35)
    at label
    at form
    at div
    at http://localhost:3000/static/js/main.chunk.js:385:70
    at SessionContainer
    at div
    at App
console.<computed> @ index.js:1
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of InputElement which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
    at input
    at InputElement (http://localhost:3000/static/js/vendors~main.chunk.js:33079:30)
    at Controller (http://localhost:3000/static/js/vendors~main.chunk.js:30829:35)
    at label
    at form
    at div
    at http://localhost:3000/static/js/main.chunk.js:385:70
    at SessionContainer
    at div
    at App
console.<computed> @ index.js:1

Answer 1

I managed to figure out a solution to removing both of the errors I received (which turns out to not be related, but two distinct issues).

First, the 'findDOMNode is deprecated in StrictMode...' error appears to be an issue with the react-input-mask library. The library is no longer active and an alternative library I found that performs the same action but is still active is react-number-format.

The error concerning 'Function components cannot be given refs' is the result of 'register' within the Controller component. Register is already handled by the component and is not needed. Instead, you should use 'rules' to avoid the forwardRefs error. Here is an example that fixed my code:

import React, {useRef} from 'react';
import { useForm, Controller } from "react-hook-form";
import NumberFormat from 'react-number-format';


const CreateAccountForm = (props, ref) => {
  const {register, formState: { errors }, handleSubmit, watch, control} = useForm();
  const password = useRef({});
  password.current = watch("password", "");

  const onSubmit = (register) => {
    debugger;
    console.log(register)
  };

  return (
    
    <div className='sign-in-form'>
    <label> Date of Birth
          <Controller
            innerRef={ref}
            control={control}
            render={({field}) => (
              <NumberFormat 
              {...field} 
              format="##/##/####" 
              allowEmptyFormatting 
              mask="_"
            />
            )}
            rules={{
              required: 'date of birth missing',
              pattern: 
                {
                  value: /^\d{1,2}\/?\d{1,2}\/?\d{4}$/,
                  message: 'Invalid Date' 
                },
            }}
            name="DOB"
            defaultValue="" 
            type="date"
            />
        </label>
        <button type="submit">Create Account</button>
      </form>
    </div>

  )
}

export default CreateAccountForm;