Nested modals with child forms

One modal generating another, each wrapped within a form element

import { useState } from 'react';
import { Modal } from '@citizensadvice/react-dialogs';

export function Example() {
  const [show, setShow] = useState();
  const [showChild, setShowChild] = useState();

  return (
    <>
      <button
        type="button"
        onClick={() => setShow(!show)}
        aria-expanded={show}
        aria-haspopup="dialog"
      >
        Toggle
      </button>
      {show && (
        <Modal
          title="Parent modal"
          onClose={() => setShow(false)}
          footer={
            <button type="submit" onClick={() => setShow(false)}>
              Submit parent form
            </button>
          }
          renderWrapper={(props) => (
            <form {...props} onSubmit={() => setShow(false)} />
          )}
        >
          <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>
            <button
              type="button"
              onClick={() => setShowChild(!showChild)}
              aria-expanded={showChild}
              aria-haspopup="dialog"
              data-auto-focus
            >
              Open child modal
            </button>
          </p>
          {showChild && (
            <Modal
              title="Child modal"
              onClose={() => setShowChild(false)}
              portal
              footer={
                <button type="submit" onClick={() => setShowChild(false)}>
                  Submit child form
                </button>
              }
              renderWrapper={(props) => (
                <form {...props} onSubmit={() => setShowChild(false)} />
              )}
            >
              <p>
                Notice how the child modal has a portal prop passed to it. This
                prevents the two forms being nested within each other.
              </p>
            </Modal>
          )}
        </Modal>
      )}
    </>
  );
}