I created custom textfield anf anf used it with react-hook-form and the field loses focus after typing each character

Question

This is my custom textfield component CustomTextField.tsx

import React from "react";
import { TextField, TextFieldProps } from "@mui/material";
import { styled } from "@mui/material/styles";

type ICustomTextFieldProps = {
  theme: Theme;
} & TextFieldProps;
export default function CustomTextField({
  theme,
  ...props
}: ICustomTextFieldProps) {
  const CustomTextField = styled(TextField)({
    "& .MuiOutlinedInput-root": {
      
      "&.Mui-focused fieldset": {
        borderColor: "white",
      },
    },
    "& .MuiInputLabel-root": {
      color: darkValue("rgba(255, 255, 255, 0.7)", theme),
    },
    
  }) as typeof TextField;
  return <CustomTextField {...props} />;
}

When I use it with react hook form the field loses focus after each letter

My form file:

Import CustomTextField from './CustomTextField'

    <Controller
                        {...register(field.name, { required: true })}
              name={"somename"}
              control={control}
              render={({ field: { onChange, value } }) => (
                
                  <CustomTextField
                    // theme={theme}
                    onChange={onChange}
                    value={value}
                    label={"somelabel"}
                  />
                  
              )}
            />

Although if I wrote the custom textfield in the same form file .. it works properly