Estoy jugando con React API de nivel superior para tener una idea de cómo funciona y no puedo hacer que clone un componente.

Tengo un componente UserButton que debería clonar el componente Button pero agregar un texto al principio.

Código en vivo: https://codesandbox.io/s/react-cloneelement-issue-4j2ur?file=/src/App.js

 export default function App() { return ( <div className="gap-2 flex"> <Button>Login</Button> {/* Expected to get a button that says: "Hello! nice to see you Alex"*/} <UserButton>Alex</UserButton> </div> ); } export function Button({ children, label, className }) { return ( <div className={`py-2 px-4 bg-purple-800 hover:bg-purple-900 inline-block rounded text-white cursor-pointer ${className}`} > {label} {children} </div> ); } export function UserButton() { // React.cloneElement not working return React.cloneElement(Button, { label: "Hello! nice to see you" }); }

El error que estoy recibiendo:

Error El tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido, o puede haber mezclado las importaciones predeterminadas y con nombre.