useControlledState

toggle.jsx

import {useControlledState} from "@react-stately/utils";

export function Toggle({open, defaultOpen, onOpenChange, children, ...props}) {
    // you don't need to manually handle open, defaultOpen and onOpenChange
    // just forward them to hook
    const [isOpen, setIsOpen] = useControlledState(open, defaultOpen, onOpenChange);

    return <div {...props}>
        <button onClick={() => {
            // this will call `onOpenChange` on click so you don't have to do it
            setIsOpen(!isOpen);
        }}>
            Toggle
        </button>

        {isOpen && children}
    </div>;
}

usage.jsx

<Toggle defaultOpen={true} /> // uncontrolled toggle - open by default
  
  
<Toggle open={isOpen} onOpenChange={(isOpen) => {setIsOpen(isOpen)}} /> // controlled toggle - you need to maintain state