How to toggle `details` tag by custom button

Question

React docs has a nice button to toggle details tag, see here https://react.dev/learn/thinking-in-react#props-vs-state

How is this done? I'd like to obtain similar effect, ideally without introducing states. Here is my curent code but clicking on button does not toggle details tag and clicking on title toggle it while it shouldn't: https://codesandbox.io/p/sandbox/details-lnjnds?file=%2Fsrc%2FApp.js%3A15%2C1

import * as React from "react";
import "./styles.css";

export default function App() {
  return (
    <details>
      <summary style={{ listStyleType: "none" }}>
        <h5>Title</h5>
        <button>Open</button>
      </summary>
      <div>Content</div>
    </details>
  );
}