TextField from @material-ui/core passing as a function

I am trying to pass TextField from material-ui into a react-hook-form controller, but its returning as a function. Importing prop-types and requiring an object failed.

import React from 'react';
import { useFormContext, Controller } from 'react-hook-form';
import { TextField, Grid } from '@material-ui/core';

function FormInput({ name, label, required }) {
  const { control } = useFormContext();
  const isError = false;

  return (
    <Grid item xs={12} sm={6}>
      <Controller
        as={TextField}
        name={name}
        control={control}
        label={label}
        fullWidth
        required={required}
        error={isError}
      />
    </Grid>
  );
}

export default FormInput;

Answer

Firstly as prop is deprecated consider using render prop or useController hook. It doesn’t work because there is a problem with the ref.

Here is a working example without Controller: React Hook Form V7 – MUI TextField

And here with the useController hook: React Hook Form V7 – MUI TextField useController

You can find the documentation about useController here: https://react-hook-form.com/api/usecontroller