react-phone-number-input + ant design (antd) Input

app.js

import React, { useState, useCallback, forwardRef } from 'react';
import { Input } from 'antd';
import PhoneInput from 'react-phone-number-input/min';
import 'react-phone-number-input/style.css';

const PhoneInputComponent = forwardRef(({ onChange, ...props }, ref) => {
  const handleChange = useCallback(e => onChange(e.target.value), [onChange]);
  return <Input ref={ref} {...props} onChange={handleChange} />;
});

const App = () => {
  const [phoneNumber, setPhoneNumber] = useState();
  return (
    <div className="app">
      <PhoneInput
        value={phoneNumber}
        onChange={setPhoneNumber}
        inputComponent={PhoneInputComponent}
      />
    </div>
  );
};

export default App;

@mcmxc it works for me. Thanks!!!!
this is in Typescript:

import AntdInput, { InputProps, InputRef } from 'antd/es/input'
import classnames from 'classnames'
import React, { useImperativeHandle, useRef } from 'react'

interface Props extends InputProps {}
const Input = React.forwardRef<InputRef, Props>((props, ref) => {
  const inputRef = useRef(null)

  useImperativeHandle(ref, () => (inputRef.current as any)?.input ?? null, [])

  return ( <AntdInput ref={inputRef} {...props} /> )
})

Input.displayName = 'Input'
export default Input