// Parent
const [showModal, setShowModal] = useState(false);
return (
  <>
    <button onClick={() => setShowModal(true)}>Open from parent</button>
    <CounterModal isOpen={showModal} onClose={() => setShowModal(false)} />
  </>
);

// Child (CounterModal)
export default function CounterModal({ isOpen, onClose }) {
  // use isOpen / onClose instead of internal state
}

2. Forward a ref with useImperativeHandle (if you must keep state in child)
const Child = forwardRef((props, ref) => {
  const [isOpen, setIsOpen] = useState(false);
  useImperativeHandle(ref, () => ({
    open: () => setIsOpen(true),
    close: () => setIsOpen(false),
  }));
  // ...
});

// Parent
const childRef = useRef(null);
<button onClick={() => childRef.current?.open()}>Open</button>
<Child ref={childRef} />
Use sparingly — it breaks the "data flows down" mental model.

3. Controlled + uncontrolled hybrid (flexible)
Let the child manage its own state unless the parent passes isOpen — then it becomes controlled.

// Child
export default function CounterModal({ isOpen, onClose, defaultOpen = false }) {
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
  const open = isOpen ?? internalOpen;
  const setOpen = isOpen ? onClose : setInternalOpen; // simplified
  // ...
}

Which to pick:
- Parent owns the trigger → lift state (#1)
- Child is a reusable library component → hybrid (#3)
- Weird legacy constraint → ref (#2)

Don't overthink it. Most of the time, lifting state is the cleanest. The child becomes dumber (just UI), the parent
decides when it shows.