Componente funcional de React HOC: Cómo hacer que cualquier hijo tenga el estado y la lógica del componente padre.

Estoy intentando crear un componente de función React Hover (enlace a un sandbox) que brindará comportamientos de hover a cualquier elemento {children}, es decir, sus ganchos y métodos internos:

function WithHover({ children }) {
  const [hover, setIsHover] = React.useState(null);
  const [hoverText, setHoverText] = React.useState("");
  const mouseOver = () => setIsHover(true);
  const mouseOut = () => setIsHover(false);

  const childrenWithExtraProp = React.Children.map(children, (child) => {
    return React.cloneElement(child, {
      hover,
      setIsHover,
      hoverText,
      setHoverText
    });
  });

  return (
    <>
      <div style="{{" width:="" "20%",="" height:="" "20",="" display:="" "block",="" marginbottom:="" "5%",="" backgroundcolor:="" "pink"="" }}="">
        <p>{hoverText}</p>
      </div>

      <main onmouseover="{mouseOver}" onmouseout="{mouseOut}">
        {childrenWithExtraProp}
      </main>

  );
}

export default function App() {

  function Button({ children }) {
    return <button>{children}</button>;
  }
  return (
    <div classname="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Comienza a editar para ver algo de magia!</h2>

      <withhover></withhover>
      <button hover="{true}">foo</button>
      <withhover></withhover>
    </div>
  );
}

Sin embargo, cuando reviso el para ver si los props estaban allí a través de una consola, obtuve un arreglo vacío.

function Button(props) {
  console.log('props', props); // cero props
  return <button>{props.children}</button>;
}

¿Qué me estoy perdiendo?