Estoy creando un componente "UsernameInput", que representa mi componente personalizado "TextInput":

 const UsernameInput = forwardRef( ( { ... }, ref ) => { ... return <TextInput ref={ref} /> });

Mi componente TextInput expone algunas funciones a sus padres:

 const TextInput = forwardRef( ( { ... }, ref ) => { ... useImperativeHandle( ref, () => ({ getText: () => text, setText, focus, blur, }), [text] ); ... });

Ahora... en mi componente UsernameInput, también quiero exponer otras funcionalidades...

 const UsernameInput = forwardRef( ( { ... }, ref ) => { ... useImperativeHandle( ref, () => ({ getUsernameInformation: () => usernameInformation, }), [usernameInformation] ); return <TextInput ref={ref} /> });

El principal problema que estoy experimentando es que, si hago lo siguiente:

 const usernameInputRef = useRef(null); const handleOnSubmit = () => { usernameInputRef.current.blur() } return ( <UsernameInput ref={usernameInputRef} ... );

El código me arroja una excepción ".blur() no está definido".

Parece que, al tener dos useImperativeHandle , las funcionalidades expuestas se superponen.

¿Alguna idea sobre cómo resolver este problema?