I'm upgrading react-hook-form from version 6.x to 7.x and the instructions say to replace the Component as with a render prop.
That's all good for most of my styled components but for my DatePicker I need to pass in an inputRef for it to work.
The old code (working well under react-hook-form v6) is as follows
export const DatePicker = styled(
({ name, validation, label, control, value, onChange, disablePast, ...props }) => (
<Row id={name} {...props}>
<Controller
as={forwardRef((_props, ref) => (
<KeyboardDatePicker
id={name}
name={name}
disableToolbar
margin="dense"
inputVariant="outlined"
format="dd-MM-yyyy"
label={label}
value={value}
onChange={onChange}
autoOk
inputRef={ref}
disablePast={disablePast}
/>
))}
name={name}
control={control}
rules={validation}
/>
</Row>
)
)(({ theme }) => ({
padding: theme.spacing(0, 0, 1, 0)
}))
so replacing the as with a render prop looks like
export const DatePicker = styled(
({ name, validation, label, control, value, onChange, disablePast, ...props }) => (
<Row id={name} {...props}>
<Controller
render={({ field }) =>
forwardRef((_props, ref) => (
<KeyboardDatePicker
{...field}
id={name}
name={name}
disableToolbar
margin="dense"
inputVariant="outlined"
format="dd-MM-yyyy"
label={label}
value={value}
onChange={onChange}
autoOk
inputRef={ref}
disablePast={disablePast}
/>
))
}
name={name}
control={control}
rules={validation}
/>
</Row>
)
)(({ theme }) => ({
padding: theme.spacing(0, 0, 1, 0)
}))
but this doesn't work and I get the error
Objects are not valid as a React child (found: object with keys {$$typeof, render})
The issue appears to be my use of forwardRef and, try as I might, I can't work out where or how to fix it.