phone number field with react-hook-form and Material-UI

PhoneNumberField.tsx

import { RegisterOptions, useController } from 'react-hook-form'
import { TextField, TextFieldProps } from '@material-ui/core'
import { forwardRef, useEffect, useRef } from 'react'
import PhoneInput from 'react-phone-number-input/input-mobile'
import useLmTranslation from '../../../lib/hooks/useLmTranslation'

type LmTextFieldFormProps = TextFieldProps & {
  name: `${string}.${string}` | `${string}.${number}` | `${string}`
  rules?: Exclude<
    RegisterOptions,
    'valueAsNumber' | 'valueAsDate' | 'setValueAs'
  >
}

function LmPhoneNumberFieldForm({
  name,
  rules,
  helperText,
  ...rest
}: LmTextFieldFormProps): JSX.Element {
  const { t } = useLmTranslation()

  const ForwardInputComponent = forwardRef((props, ref) => {
    // @ts-ignore
    const currentValue = props.value
    const rendered = useRef<boolean>() // to grab the default value
    const {
      fieldState: { invalid },
      field: { onChange, value }
    } = useController({
      name,
      rules
    })

    useEffect(() => {
      if (rendered.current) {
        onChange(currentValue) // don't call on initial render due to defaultValue
      }
      rendered.current = true
    }, [onChange, currentValue, rendered])

    return (
      <TextField
        {...rest}
        {...props}
        name={name}
        value={currentValue || value}
        helperText={invalid ? t('error.required') : helperText}
        error={invalid}
        required={!!rules?.required}
        inputRef={ref}
      />
    )
  })
  return (
    <PhoneInput
      onChange={(val) => {
        if (typeof rest.onChange === 'function') {
          rest.onChange(val)
        }
      }}
      inputComponent={ForwardInputComponent}
    />
  )
}