反应递归嵌套组件

如何解决反应递归嵌套组件

import { render } from "react";

const MyComponent = ({ count = 0,children }) => {
  return count === 1 ? null : (
    <div style={{ border: "3px solid #ccc",margin: 5 }}>
      {children}
      <MyComponent count={++count} children={children} />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent>
        hi
        <MyComponent>
          wow
          <MyComponent> bye </MyComponent>
          <MyComponent> bye </MyComponent>
          <MyComponent> bye </MyComponent>
        </MyComponent>
      </MyComponent>
    </div>
  );
};

render(<App />,document.getElementById("root"));

如何在没有count props的情况下解决上面的代码。我想做上面的嵌套组件。谁能指导我如何实现这一目标？

代码：https://codesandbox.io/s/preact-nested-recursive-vjrle