Multiple dialogs

import { useRef, useState } from 'react';
import { Dialog } from '@citizensadvice/react-dialogs';

function ShowDialog() {
  const [show, setShow] = useState();
  const ref = useRef();

  return (
    <>
      <button
        type="button"
        onClick={() => setShow(!show)}
        aria-expanded={show}
        aria-haspopup="dialog"
        ref={ref}
      >
        Toggle
      </button>
      {show && (
        <Dialog
          title="Dialog title"
          onClose={() => setShow(false)}
          anchorRef={ref}
        >
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
            nisi ut aliquip ex ea commodo consequat.
          </p>
          <p>
            Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.
          </p>
          <p>
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
            officia deserunt mollit anim id est laborum.
          </p>
        </Dialog>
      )}
    </>
  );
}

export function Example() {
  return (
    <>
      <ShowDialog />
      <ShowDialog />
    </>
  );
}