How does one add one's own bespoke inputComponent JSX <input /> to a react-phone-number-input PhoneInput?

Question

Code follows this description.

react-phone-number-input allows uses to replace its default <input /> JSX tag with one's own, which specifically requires the type React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>> and needs a forwardRef (to allow access to the <input />).

Whilst I believe I have provided this with myTextInput the compiler is complaining that:

Property '$$typeof' is missing in type 'Element' but required in type 'ForwardRefExoticComponent<... and Type 'Element' is not assignable to type 'ForwardRefExoticComponent<...

OK, myTextInput = <ForwardedInput does return an <input /> JSX so yes it is a React Element and therefore the error messages make some sense. But said tag will resolve to a React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<any>> so how can I get the compiler to recognise that?

Thank you for reading.

import React, { forwardRef, InputHTMLAttributes } from 'react';
import 'react-phone-number-input/style.css'
import PhoneInput from 'react-phone-number-input'

const ForwardedInput = forwardRef<any, InputHTMLAttributes<HTMLInputElement>>(
    (props, ref) => {
        const { onChange, value } = props;
        return (
            <input
                type="text"
                ref={ref}
                onChange={onChange}
                value={value}
            />
        );
    }
);

const MyPhoneInput = () => {

    const ref = React.createRef();
    const myTextInput = <ForwardedInput 
        onChange={() => {}}
        value="string"
        ref={ref}
    />;

    return (
        <div>
            <PhoneInput
                    placeholder="Enter phone number"
                    value={"value"}
                    inputComponent={myTextInput}
                    onChange={() => {
                        return;
                    }}
                />
        </div>
    );
};

export default MyPhoneInput;

Answer 1

For those who are suffering the same problem, a quick fix is to go to this lib (smaller and you can pass input props):

https://www.npmjs.com/package/react-phone-input-2

Answer 2

inputComponent={ForwardedInput}

this works. for now my life is so incredibly busy i don't have time for a detailed explanation but will come back to this asap.