I am playing with React Top-Level API to get a feel how it works and I can't get it to clone a component.

I have a UserButton component that should clone Button component but add a text in the beginning.

Live code: 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"
  });
}

The error I am getting:

Error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.