Hello i'm trying to open a Modal upon NavDropdown.Item click that is inside a NavBar,

If I do something like this

import { useState } from "react";
import { rockPositions } from "../../constant/markers"
import { CloseButton, NavDropdown, Alert } from "react-bootstrap";
import Modal from 'react-modal/lib/components/Modal';
import { RouteBadge } from "../RouteBadge/RouteBadge";
import { RouteTable } from "../RouteTable/RouteTable";
import { modalStyle } from '../RockModalMarker/RockModalMarker.css.js';

const RockDropDownModal = (props) => {

    const [isOpen, setIsOpen] = useState(false);
    const route = props.route;
    const rock = rockPositions.find(rockPosition => rockPosition.name === route.rock);
    const index = props.rockIndex;

    const toggleModal = (e) => {
        setIsOpen(!isOpen);
    };

    if (!isOpen) {
        return (
            <NavDropdown.Item key={index} href="#rock" onClick={toggleModal}><span className={"rock-name-dropdown"}>{route.rock}</span>: {route.name}</NavDropdown.Item>
        )
    }
    return (
        <Modal key={index}
            defaultStyles={modalStyle}
            isOpen={isOpen}
            onRequestClose={toggleModal}
            centered
            ariaHideApp={false}
        >
            <CloseButton variant="white" onClick={toggleModal} />
            <Alert variant="primary" style={{ marginTop: "20px", backgroundColor: "#01579B", borderColor: "#0277BD" }}>
                <Alert.Heading style={{ color: "#FFF" }}><p className="routeName">{rock.name}</p></Alert.Heading>
            </Alert>
            <RouteBadge rock={rock} />
            <RouteTable rock={rock} />
        </Modal>
    )
} 

export { RockDropDownModal };

the modal opens fine but it's behind the NavBar and if I close the navbar the modal closes too.

I was trying to close the navbar and only show the modal but and I wrap the dropdown item like this

<Navbar.Toggle>
            <NavDropdown.Item key={index} href="#rock" onClick={toggleModal}><span className={"rock-name-dropdown"}>{route.rock}</span>: {route.name}</NavDropdown.Item>
</Navbar.Toggle>

it closes the Navbar but also the Modal.

In the screenshot here you can see the NavBar, when the selected item is clicked the Modal should open and the navbar close.

How can I prevent the Modal from closing?