multi-rfh-select-not-fixed.tsx

import { memo } from "react";
import { TextFieldProps, TextField, MenuItem } from "@mui/material";
import { Path, Control, Controller } from "react-hook-form";

export type HookFormSelectProps<TFormValues> = {
  name: Path<TFormValues>;
  control: Control<TFormValues, any>;
  children: React.ReactNode;
} & TextFieldProps;

const HookFormSelect = <TFormValues extends Record<string, any>>(
  props: HookFormSelectProps<TFormValues>
) => {
  const { name, control, ...restProps } = props;

  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { ref, ...restField } }) => (
        <TextField {...restProps} inputRef={ref} select {...restField}>
          {props.children}
        </TextField>
      )}
    />
  );
};

const HookFormSelectMemo = memo(HookFormSelect) as typeof HookFormSelect;

export { HookFormSelectMemo as HookFormSelect };