Как предотвратить модальное закрытие без каких-либо действий при выборе элемента списка из выпадающего списка

Question

Как я могу предотвратить закрытие modal без каких-либо действий? У меня есть модальное значение для login и registration, когда я щелкаю из выпадающего списка, оно заполняется, но как только я щелкаю в модале, оно закрывается.

Нужно ли мне принудительно добавлять class= modal-open?

Любое предложение по предотвращению его закрытия. Большое спасибо.

Я использую Reactstrap

// выпадающий список. js

import React, { Component, Fragment, useState} from 'react';
import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
import { Layout, Header, Navigation, Drawer, Content } from 'react-mdl';
import {Link} from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import RegisterModal from '../auth/RegisterModal';
import LogOut from '../auth/LogOut';
import LoginModal from '../auth/LoginModal';

class MenuDropdown extends Component {

      state = {
        isOpen: false
    }

    static propTypes = {
        auth: PropTypes.object.isRequired
    }

    toggle = () => {
        this.setState({
            isOpen: !this.state.isOpen
        });
    }

    render(){

      const { isAuthenticated, user } = this.props.auth;
      const authLinks = (
      <Fragment>
        { user ? (user.is_admin === true ? 

          (<Navigation>
            <Content>
                <Link to="/dashboard"> Admin</Link>
            </Content>
            <Link>
                <LogOut/>
            </Link>
          </Navigation>) :

          (<Navigation>
            <Link>
                <LogOut/>
            </Link>
          </Navigation> ) 
          ): ''
        }
      </Fragment>
    );

    const guestLinks = (
      <Navigation>
        <Link>
          <LoginModal/>
        </Link>
        <Link>
          <RegisterModal/>
        </Link>
      </Navigation>
    );

    return (
      <UncontrolledDropdown >
        <DropdownToggle caret>
          { user ? (user.is_admin === true ? `Welcome Admin ${user.name}` : `Welcome ${user.name}` ) : `Welcome User` }
        </DropdownToggle>
        <DropdownMenu  isOpen={this.state.isOpen}>
        { isAuthenticated ? authLinks : guestLinks }
        </DropdownMenu>
      </UncontrolledDropdown>
    );
  }
}

  const mapStateToProps = state => ({
    auth: state.auth
  });

export default connect(mapStateToProps, null)(MenuDropdown);

// выпадающий список