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;

Hey dude, I think this might be wrong. since the <Input ref={ref} is not correct. ref still means ant design Input rather than HTML input so it will cause some issue on react-phone-number-input library.

Or in another word, this solution doesn't work on ant design v4.

Any solution you guys know of with v4?

We can extract the original input element from <Input /> instance.
Example with imask.js:
uNmAnNeR/imaskjs#163 (comment)

just checked, this peace of code still works with v4

doesn't work with the latest Antd https://stackblitz.com/edit/react-dg4xxp