I am using react-phone-number-input and some custom inputs.

I would like to use my custom input within this library.

as you can see from the Documentation, I can use the following props :

inputComponent

to use a custom input, as long as

Phone number <input/> component.

Receives properties:

value: string — The formatted value.
onChange(event: Event) — Updates the formatted value from event.target.value.
onFocus() — Is used to toggle the --focus CSS class.
onBlur() — Is used to toggle the --focus CSS class.
Other properties like type="tel" or autoComplete="tel" that should be passed through to the DOM <input/>.
Must also either use React.forwardRef() to "forward" ref to the <input/> or implement .focus() method.

So I have done the following :

<PhoneInputWithCountry inputComponent={<Input />}/>

With my input beeing the following (It is simplified, but globally it looks like this) :

export const Input = forwardRef<HTMLInputElement, InputProps>(
  (
    {
      value,
      disabled,
      onBlur,
      prefixComponent,
      suffixComponent,
      ...rest
    },
    ref
  ) => {
    return (
      <div>
        <input
          disabled={disabled}
          onBlur={onBlur}
          ref={ref}
          value={value}
          {...rest}
        />
      </div>
    );
  }
);

I think all looks fine, but I get prompted with

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of ForwardRef(Input).

I do not understand at all what is wrong here.