Estoy usando react-phone-number-input y algunas entradas personalizadas.

Me gustaría usar mi entrada personalizada dentro de esta biblioteca.

como puede ver en la Documentación , puedo usar los siguientes accesorios:

inputComponent

usar una entrada personalizada, siempre y cuando

 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.

Así que he hecho lo siguiente:

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

Con mi entrada siendo la siguiente (está simplificada, pero globalmente se ve así):

 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> ); } );

Creo que todo se ve bien, pero me piden

El tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto. Compruebe el método de renderizado de ForwardRef(Input) .

No entiendo en absoluto lo que está mal aquí.