"missing ref" error from version 6.10

Describe the bug I am using:

• React + Typescript
• Material-ui (@material-ui/core) for the UI
• Material-ui-pickers (@material-ui/pickers) for the KeyboardDatePicker
• date-fns and DateFnsUtils (@date-io/date-fns) for the picker
• react-hook-form (of course)
• yup and @hookform/resolvers/yup resolver.

Trying to connect a KeyboardDatePicker with the Controller component I was getting errors, so I googled and found a solution (see sandbox below), but with my version of react-hook-form (which is 6.11.3) it is not working.

The error in console says:

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

This happens only with any version that is >= 6.10.0

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/react-hook-form-ref-bug-rji1w
2. The Date input is working
3. Update react-hook-form to any version that is >= 6.10.0
4. See error in console

Codesandbox link (Required)

• CodeSandbox

Expected behavior A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• OS: [e.g. iOS] any
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22]

[bianchi]

Was able to move forward just passing all props

render={props => ( autoOk ... {...props} size="small" ... )}

[kino90]

Thanks, got it working with the following code

<Controller
    control={control}
    name="myDateField"
    render={({ onChange, onBlur, value, name, ref }) => (
        <KeyboardDatePicker
            autoOk
            disabled={isLoading}
            error={Boolean(errors?.myDateField)}
            format="dd/MM/yyyy"
            fullWidth={true}
            helperText={getHelperText("myDateField")}
            inputRef={ref}
            inputVariant="outlined"
            label="Date"
            name={name}
            onBlur={onBlur}
            onChange={onChange}
            size="small"
            variant="inline"
            value={value}
        />
    )}
/>

by also setting defaultValues to null to avoid “converting uncontrolled input to controlled” error 😃