如何将React组件传入另一组件并在其中正常使用？

我有一个Button组件，可通过variant、active、size等props修改样式。我希望将该Button组件传入Dropdown组件，并在Dropdown中像普通组件一样使用。

Header组件代码示例（已将Button作为Trigger传入Dropdown） #

function Header() {
  return (
    <div>
      <Button.Link href="/">Log in</Button.Link>
      <Button.Link href="/">Sign up</Button.Link>
      <Dropdown
        Trigger={ 
          <Button variant="outline" size="icon">
            <MenuIcon className="size-4" />
          </Button>
        }
      >
        <div className="absolute right-0 top-8 h-72 w-64 bg-red-200">Hello</div>
      </Dropdown>
    </div>
  );
}

export default Header;

期望的Dropdown组件用法（示例代码仅作需求说明） #

interface DropdownProps {
  Trigger: any;
  children: React.ReactNode;
}

function Dropdown({ Trigger, children }: DropdownProps) {
  const [isOpen, setIsOpen] = useState(false);

  const dropdownRef = useRef<HTMLDivElement>(null);

  const toggleDropdown = () => {
    setIsOpen((current) => !current);
  };

  useClickOutside(dropdownRef, () => setIsOpen(false));

  return (
    <div ref={dropdownRef} className="relative">
      {<Trigger onClick={toggleDropdown} active={isOpen} />} {/* 希望这样使用 */}
      {isOpen && children}
    </div>
  );
}

export default Dropdown;

当前使用cloneElement的实现方式 #

import { cloneElement, useState, useRef } from 'react';

interface DropdownProps {
  trigger: React.ReactElement<{
    onClick: () => void;
    active: boolean;
  }>;
  children: React.ReactNode;
}

function Dropdown({ trigger, children }: DropdownProps) {
  const [isOpen, setIsOpen] = useState(false);

  const dropdownRef = useRef<HTMLDivElement>(null);

  const toggleDropdown = () => {
    setIsOpen((current) => !current);
  };

  useClickOutside(dropdownRef, () => setIsOpen(false));

  return (
    <div ref={dropdownRef} className="relative">
      {cloneElement(trigger, { onClick: toggleDropdown, active: isOpen })}
      {isOpen && children}
    </div>
  );
}

export default Dropdown;

请问有没有更优的实现方式？

内容的提问来源于stack exchange，提问作者Sha'an