error when using custom component

[Wimmind]

I have a wrapper component over Textfield, if I use it, I get an error in the console, how can I fix it?

import * as React from 'react'
import TextFieldLib from '@mui/material/TextField'
import { TextFieldProps } from '@mui/material/TextField/TextField'
import IconButton from '@mui/material/IconButton'
import { useStyles } from './TextField.styles'

export type Props = TextFieldProps & {
  clearable?: boolean
  onClear?: () => void
}

export const TextField: React.FC<Props> = (props) => {
  const { value, label, clearable, className, onClear, ...restProps } = props
  const { classes, cx } = useStyles()

  return (
    <div className={cx(classes.root, className)}>
      {label !== '' && renderLabel(propsWithClasses, label)}
      <TextFieldLib
        {...restProps}
        value={value}
      />
    </div>
  )
}

```ts
import * as React from 'react'
import { TextField, Props as TextFieldProps } from '../TextField'
import ReactPhoneInput from 'react-phone-input-material-ui'

type Props = TextFieldProps

export const PhoneTextField: React.FC<Props> = (props) => {
  const { value, onChange, ...restProps } = props

  return (
    <ReactPhoneInput
      value={value as string}
      onChange={onChange as any}
      inputProps={{
        ...restProps,
      }}
      component={TextField} //here use
    />
  )
}

error:

[Wimmind]

in this case there is no error, but an error appears when entering: TypeError: Cannot read properties of undefined (reading 'setSelectionRange')

    <ReactPhoneInput
      value={value as string}
      onChange={onChange as any}
      inputProps={{
        ...restProps,
      }}
      component={React.forwardRef((props, ref) => (
        <TextField {...props} inputRef={ref} />
      ))}
    />