useFormContext type error

[IronCub3]

Hi I was trying to create a Select Controlled select component using MUI and react hook form passing from the use of FormProvider and useFormContext in the nested custom Select but by passing name and lablel as props I get a type error in the nested custom select component because the name type should be someone of the keys specified in the useForm type. This is my code:

App.tsx

// Ext
import {
  Controller,
  SubmitHandler,
  useForm,
  FormProvider,
} from "react-hook-form";
import {
  Box,
  Button,
  Card,
  CardActions,
  CardContent,
  MenuItem,
  TextField,
  Typography,
} from "@mui/material";
import { zodResolver } from "@hookform/resolvers/zod";
// Types
import { LoginFormInputs } from "../types";
// Scss
import "../static/scss/Login.scss";
import BrandName from "../components/BrandName";
import { LoginSchema } from "../schemas";
import FormSelect from "../components/form/FormSelect";

interface LoginFomrInputs {
  selectDefVal: string;
}


const Login: React.FC = () => {

  const defaultValues: LoginFormInputs = {
    selectDefVal: "",
  };

  const methods = useForm<LoginFormInputs>({
    resolver: zodResolver(LoginSchema),
    defaultValues,
  });

  const submitAuth: SubmitHandler<LoginFormInputs> = async (
    data: LoginFormInputs
  ) => {
    console.log(data);
  };

  return (
    <Box className="login-itemsbox">
      <Box className="title-box">
        <Typography> 
          <BrandName />
        </Typography>
      </Box>
      <Box className="card-form-box">
        <FormProvider {...methods}>
          <Card component="form" onSubmit={methods.handleSubmit(submitAuth)}>
            <CardContent>
              <FormSelect name="Testing" label="Test: *" />
            </CardContent>
            <CardActions>
              <Button type="submit" variant="contained">
                Login
              </Button>
            </CardActions>
          </Card>
        </FormProvider>
      </Box>
      <Box className="small-footer-box">Small Footer</Box>
    </Box>
  );
};

export default Login;

Nested custom select component

import { Controller, useFormContext } from "react-hook-form";
import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
  SelectProps,
} from "@mui/material";
import React from "react";
import { LoginFormInputs } from "../../types";

interface FormSelectPropsT {
  name: string;
  label: string;
}

const test = "Option 1";

const FormSelect: React.FC<FormSelectPropsT & SelectProps> = ({
  name,
  label,
  ...selectProps
}: FormSelectPropsT) => {

  const {
    control,
    formState: { errors },
  } = useFormContext<LoginFormInputs>(); // Specify the type it seems necessary otherwise it gives errors, even if should be passed by the context

  return (
    <Controller
      name={name} // if I leave the FormSelectPropsT name as string it gives the type error if I modify it to be: name: "selectDefVal" the error disappears
      control={control}
      render={({ field }) => (
        <FormControl>
        <InputLabel id={label}>
          {label}
        </InputLabel>
        <Select
          {...field}
          {...selectProps}
          value={field.value}
          className="select"
          style={{ width: 230 }}
          labelId={label}
          label={label}
          onChange={(e) => {
            field.onChange(e);
          }}
          error={!!errors[name]}
        >
          <MenuItem key={test} value={test}>
            {test}
          </MenuItem>
        </Select>
        <FormHelperText sx={{ color: "red" }}>
          {errors[name] ? errors[name]?.message : ""}
        </FormHelperText>
      </FormControl>
      )}
    />
  );
};

export default FormSelect;

The type error is:
The type 'string' is not assignable to the type '"selectDefVal"'.ts(2322) controller.d.ts(18, 5): The expected type that comes from the property 'name', declared in this point 'IntrinsicAttributes & { render: ({ field, fieldState, formState, }: { field: ControllerRenderProps<LoginFormInputs, "selectDefVal">; fieldState: ControllerFieldState; formState: UseFormStateReturn<...>; }) => ReactElement<...>; } & UseC...'

So if I say the type of name should be "selectDefVal" the error disappears, but I thought that the type should be automatically passed from the useFormContext as I saw in different tutorials but this doesn't happen. If someone can help me find out what's wrong or if I missed something it would be really appreciated! Thanks in advance.

[IronCub3]

Also if I change my custom form select component like this:

import { Controller, useFormContext } from "react-hook-form";
import {
  FormControl,
  FormHelperText,
  InputLabel,
  MenuItem,
  Select,
  SelectProps,
} from "@mui/material";
import React from "react";
import { LoginFormInputs } from "../../types";

interface FormSelectPropsT {
  name: string;
  label: string;
}

const test = "Option 1";

const FormSelect: React.FC<FormSelectPropsT & SelectProps> = ({
  name,
  label,
  ...selectProps
}: FormSelectPropsT) => {

  const {
    control,
    formState: { errors },
  } = useFormContext(); 

  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <FormControl>
        <InputLabel id={label}>
          {label}
        </InputLabel>
        <Select
          {...field}
          {...selectProps}
          value={field.value}
          className="select"
          style={{ width: 230 }}
          labelId={label}
          label={label}
          onChange={(e) => {
            field.onChange(e);
          }}
          error={!!errors[name]}
        >
          <MenuItem key={test} value={test}>
            {test}
          </MenuItem>
        </Select>
        <FormHelperText sx={{ color: "red" }}>
          {errors[name] ? errors[name]?.message : ""} // The error now It's here
        </FormHelperText>
      </FormControl>
      )}
    />
  );
};

export default FormSelect;

I get this error:
const errors: FieldErrors<FieldValues> No overloads match this call. The overload 1 of 2,'(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<FormHelperTextClasses> | undefined; disabled?: boolean | undefined; ... 6 more . ..; variant?: OverridableStringUnion<...> | undefined; } & CommonProps & Omit<...>): Element | null', returned the following error. The type 'string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined' is not assignable to type 'ReactNode'. Type 'FieldError' is not assignable to type 'ReactNode'. The following properties of the 'ReactPortal' type are missing from the 'FieldError' type: key, children, props The overload 2 of 2,'(props: DefaultComponentProps<FormHelperTextTypeMap<{}, "p">>): Element | null', returned the following error. The type 'string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined' is not assignable to type 'ReactNode'.ts(2769) FormHelperText.d.ts(17, 5): The expected type comes from the 'children' property, declared here in the 'IntrinsicAttributes type & { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<FormHelperTextClasses> | undefined; ... 7 blackberries ...; variant?: OverridableStringUnion<...> | undefined; } & CommonProps & Omit<...>' FormHelperText.d.ts(17, 5): The expected type comes from the 'children' property, declared here in the 'IntrinsicAttributes type & { children?: ReactNode; classes?: Partial<FormHelperTextClasses> | undefined; disabled?: boolean | undefined; ... 6 blackberries ...; variant?: OverridableStringUnion<...> | undefined; } & CommonProps & Omit<...>'

PS: My objective is to have a customizable select component to be used in different forms.

[IronCub3]

Another example with the same error showed here but with a Textfield:

import { Controller, useFormContext } from "react-hook-form";
import {
  TextField,
  TextFieldProps,
} from "@mui/material";
import React from "react";

interface FormSelectPropsT {
  name: string;
  label: string;
}

const RhfTextFieldMui: React.FC<FormSelectPropsT & TextFieldProps> = ({
  name,
  label,
  ...selectProps
}: FormSelectPropsT) => {

  const {
    control,
    formState: { errors },
  } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      render={({ field }) => (
        <TextField
          {...field}
          {...selectProps}
          value={field.value}
          className="textfield"
          style={{ width: 230 }}
          label={label}
          onChange={(e) => {
            field.onChange(e);
          }}
          error={!!errors[name]}
          helperText={             //The error is here
            errors[name]
              ? errors[name]?.message
              : ""
          }
        >
        </TextField>
      )}
    />
  );
};

export default RhfTextFieldMui;

The error: (property) helperText: string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined The type 'string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined' is not assignable to type 'ReactNode'. Type 'FieldError' is not assignable to type 'ReactNode'. The following properties of the 'ReactPortal' type are missing from the 'FieldError' type: key, children, propsts(2322) TextField.d.ts(80, 3): The expected type comes from the 'helperText' property, declared here in the 'IntrinsicAttributes & TextFieldProps' type

[Moshyfawn]

If all you need is the field error, you can simply get it from Controller:

<Controller render={({ fieldState }) => fieldState.error} />

[IronCub3]

@Moshyfawn this gives again a type error: (parameter) name: string The element implicitly contains a type 'any' because the expression of type 'string' cannot be used to index the type 'FieldError'. No index signature was found with a parameter of type 'string' in type 'FieldError'.ts(7053)

[IronCub3]

The only work around that I've found is to use the react fragment to incapsulate the erro and in this way the error disappears, like this:

helperText={<>{errors[name] ? errors[name]?.message : ""}</>}

Here it is a sandbox of the problem: https://codesandbox.io/s/test-useformcontext-7jt5dz?file=/src/App.tsx

[IronCub3]

I've found my logical error!
The error was that I was using the errors in the formState and not the fieldState when I've defined my custom element, this way the react fragment is no more needed. The new code is:

import { Controller, useFormContext } from "react-hook-form";
import {
  TextField,
  TextFieldProps,
} from "@mui/material";
import React from "react";

interface FormSelectPropsT {
  name: string;
  label: string;
}

const RhfTextFieldMui: React.FC<FormSelectPropsT & TextFieldProps> = ({
  name,
  label,
  ...selectProps
}: FormSelectPropsT) => {

  const {
    control,
  } = useFormContext();

  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState }) => (
        <TextField
          {...field}
          {...selectProps}
          value={field.value}
          className="textfield"
          style={{ width: 230 }}
          label={label}
          onChange={(e) => {
            field.onChange(e);
          }}
          error={!!fieldState?.error}
          helperText={
            fieldState?.error
              ? fieldState?.error?.message
              : ""
          }
        >
        </TextField>
      )}
    />
  );
};

export default RhfTextFieldMui;