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;

https://stackoverflow.com/questions/66957809/typeerror-props-render-is-not-a-function-react-hook-form April 06, 2021 at 02:21AM