Как использовать материал-интерфейс TextField с реакцией-номер телефона-ввода

Question

Я бы хотел предоставить компонент TextField пользовательского интерфейса для компонента PhoneInput с помощью ввода-ввода-номера телефона в виде inputComponent prop.

Однако, похоже, я не могу успешно применить реф. Хотя я вижу компонент TextField пользовательского интерфейса, отображаемый в пользовательском интерфейсе, и состояние успешно обновляется со значением, он продолжает терять фокус после ввода первого значения.

import React, { forwardRef, createRef } from 'react';
import { TextField } from '@material-ui/core';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';

const SampleComponent = ({ handleChange }) => {

const phoneInput = forwardRef((props, ref) => {

return (
  <TextField
    inputRef={ref}
    fullWidth
    label="Phone Number"
    variant="outlined"
    name="phone"
    onChange={handleChange}
  />
  );
});

const ref = createRef();
return (
    <PhoneInput ref={ref} inputComponent={phoneInput} />
   );
  };