TypeError: props.render is not a function (React hook form)

I am passing methods as a prop in this form I am making with react-hook-form. Its giving me (TypeError: props.render is not a function) when Controller is added in from react-hook-form. I cannot find any solutions online so any help is appreciated.

import { useForm, FormProvider } from 'react-hook-form';
import FormInput from './CustomTextField';

const AddressForm = () => {
  const methods = useForm();

  return (
    <>
      
      <FormProvider {...methods}>
        <form onSubmit=' '>
          <Grid container spacing={3}>
            <FormInput required name='firstName' label='First name' />
          </Grid>
        </form>
      </FormProvider>
    </>
  );
};

import { useFormContext, Controller } from 'react-hook-form';


const FormInput = ({ name, label, required }) => {
  const { control } = useFormContext();
  

  return (
    <>
      <Controller
        as={TextField}
        name={name}
        control={control}
        label={label}
        fullWidth
        required={required}
        
      />
    <>
  );
};

export default FormInput;

Answer

This problem is arising either because you update your react-hook-form or new to react-hook-form

You just need to use render prop in Controller component

  <Controller
        render={({ field }) => (
          <input
            onChange={(e) => field.onChange(transform.output(e))}
            value={transform.input(field.value)}
          />
        )}
      />

or if you are using a third party Form library

import { Input, Select, MenuItem } from "@material-ui/core";
   <Controller
            render={({ field }) => (
              <Select {...field}>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
              </Select>
            )}
            control={control}
            name="select"
            defaultValue={10}
          />