Why is this react-bootstrap modal not properly responding?

Question

I am working on a react-bootstrap web app that uses modal dialogs. Multiple modal dialogs are rendered in the app at different places (e.g. in different components, route/switch constructs, different levels of hierarchy etc.). However, only ever one modal dialog is active at a time.

Until now I never had a problem with that approach (I'm relatively new to react). Somehow I ended up in a situation where two modal dialogs are "semi-frozen"? They each open and close as supposed (and also the buttons work), but I cannot edit the form in them anymore (and also cannot select the header text for example).

Both dialogs were working until I added more dialogs at other places (that's my guess at least). Is there something I need to watch out for when working with multiple modal dialogs? Or more generally like where to render modal dialogs?

Modal dialogue in question

        <Modal show={show} onHide={discardChanges} backdrop={edited ? "static" : true}
               keyboard={edited ? false : true} size="lg" centered>
            <Modal.Header closeButton>
                <Modal.Title>{t("edit tour")}</Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <TourContainer tourTemplate={editableTourTemplate} pointsOfInterest={pointsOfInterest}
                               dispatch={dispatchEditableTourTemplate} validated={edited} />
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={saveChanges} disabled={!(edited && editableTourTemplate.valid)}>
                    {t("save")}
                </Button>
                <Button onClick={discardChanges} variant="outline-primary">{t("cancel")}</Button>
            </Modal.Footer>
        </Modal>

It is rendered in another component somewhere like this:

                                <Col>
                                    <button onClick={showEditModal} className="bg-white border-0">
                                        <img src="/img/pencil.png" alt="Pencil" height="25" width="25" />
                                    </button>
                                    <TourEditModal show={editModalVisible} hide={hideEditModal}
                                                   tourTemplate={tourTemplate}
                                                   pointsOfInterest={pointsOfInterest}
                                                   update={updateTourTemplates.update} />
                                </Col>

Answer 1

The reason these two modals were behaving that way was that I moved them inside of a NavLink element. This NavLink element has a preventDefault() on mouse down because I don't like the button focus there. Naturally, the modals became unfocusable.

Once I moved the modals out of the NavLink element they were working as intended again.