React.forwardRef warning but no ref passed or how to pass custom component to another component

Question

I want to pass a custom input proponent to another proponent this way:

<FormTextField
     name="startTime"
     label="startTime"
     type="time"
     error={!!errors.startTime}
     CustomTextField={TextFieldColorTimeIcon} <-- custom TextField
     ...
/>

The code for FormTextField:

export default function FormTextField({ name, CustomTextField, ...other }) {
    const { control } = useFormContext();
    let LocalCustomTextField = CustomTextField ? CustomTextField : TextField;

    return (
      <Controller
        name={name}
        control={control}
            render={
                ({ field, fieldState: { error } }) => (<LocalCustomTextField {...field} fullWidth error={!!error} helperText={error?.message} {...other} />)
              }
        />
      );
    }

And the code for TextFieldColorIcon:

export function TextFieldColorIcon({ sx, ...other }: TextFieldColorIconProps) {
    return <TextField
        sx={{
            ...sx,
            '& input[type="time"]::-webkit-calendar-picker-indicator': {
                filter:
                    'invert(41%) sepia(24%) saturate(301%) hue-rotate(166deg) brightness(101%) contrast(89%)',
            },
        }}
        {...other} />
}

But I've got warning: Warning: Function proponents cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? Check the render method of Controller. at TextFieldColorIcon at Controller at FormTextField at div

despite of the fact that there is no ref passed. What is the reason of this warning and am I passing custom TextFieldColorIcon right way?