Fscked up ebil shenigans. It doesn't actually seem possible to use details for an accordion not even by abusing aria-owns. Unfortunately the spec says that summary is only sometimes exposed as a button role. details has only slightly less weirdness.

panel.jsx

import { useId, useState, useCallback } from "react";

const Panel = ({children, heading}) => {
    const detailsId = useId();
    const headingTextId = useId();
    const headingId = useId();
    const contentId = useId();
    const [open, setOpen] = useState(false);

    const onToggle = useCallback(e => {
        e.preventDefault();
        setOpen(o => !o);
    }, []);

    return <article aria-labelledby={headingId}>
               <span role="presentation" aria-owns={headingId} />
               <span role="presentation" aria-owns={contentId} />
               <details
                   id={detailsId}
                   onToggle={onToggle}
                   open={open ? "open" : null}
               >
                   <summary
                       style={{display: 'block'}}
                       aria-labelledby={headingTextId}
                       aria-controls={contentId}
                       aria-expanded={String(open)}
                   >
                       <span role="presentation" aria-owns={headingTextId} />
                       <h2 id={headingId} aria-labelledby={headingTextId}>
                           <span role="presentation" aria-owns={detailsId} />
                           <span role="presentation" id={headingTextId}>
                               {heading}
                           </span>
                       </h2>
                   </summary>
                   <div role="presentation" id={contentId}>
                       {children}
                   </div>
               </details>
           </article>;
};