How do I add a button to a login modal in a Dropdown component in reactstrap?

Question

I am trying to have a button that opens a modal in my dropdown, but either it opens twice or doesn't open at all and I don't know why. When I try to enter anything in the input field, the modal closes. I have tried replacing with a but it didn't seem to work and the modal closed immediately.

Original

import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter ,  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem, Input} from 'reactstrap';

function ExampleModal() {
  const [modal, setModal] = useState(false);
  const toggleModal = () => setModal(!modal);

  return (
    <div>
      <Button color="danger" onClick={toggleModal}>
        Click Me
      </Button>
      <Modal isOpen={modal} toggle={toggleModal}>
        <ModalHeader toggle={toggleModal}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
          <Input id="input" required />
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggleModal}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={toggleModal}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

function ExampleDropdown() {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggleDropdown = () => setDropdownOpen((prevState) => !prevState);

  return (
    <div className="d-flex p-5">
      <Dropdown
        isOpen={dropdownOpen}
        toggle={toggleDropdown}
        direction={"down"}
      >
        <DropdownToggle caret>Dropdown</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Foo Action</DropdownItem>
          <DropdownItem>Bar Action</DropdownItem>
          <DropdownItem>Quo Action</DropdownItem>
          <ExampleModal />
        </DropdownMenu>
      </Dropdown>
    </div>
  );
}

Edited 3/5/24

Note: You can use <DropdownItem> instead of <Button> since it is actually a button from what I can tell.

import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter ,  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem, Input} from 'reactstrap';

function ExampleDropdown() {
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const toggleDropdown = () => setDropdownOpen((prevState) => !prevState);
  const [modal, setModal] = useState(false);
  const toggleModal = () => setModal(!modal);

  return (
    <div className="d-flex p-5">
      <Dropdown
        isOpen={dropdownOpen}
        toggle={toggleDropdown}
        direction={"down"}
      >
        <DropdownToggle caret>Dropdown</DropdownToggle>
        <DropdownMenu>
          <DropdownItem>Foo Action</DropdownItem>
          <DropdownItem>Bar Action</DropdownItem>
          <DropdownItem>Quo Action</DropdownItem>
          <Button color="danger" onClick={toggleModal}>
            Click Me
          </Button>
        </DropdownMenu>
      </Dropdown>
      <Modal isOpen={modal} toggle={toggleModal}>
        <ModalHeader toggle={toggleModal}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
          <Input id="input" required />
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggleModal}>
            Do Something
          </Button>{" "}
          <Button color="secondary" onClick={toggleModal}>
            Cancel
          </Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}