Как открыть несколько Bootstrap Modal в React JS

Question

Я изучаю React JS, и для этого я копирую веб-сайт, который я уже сделал на другом языке.

На веб-сайте у меня есть модальное окно, которое открывается и предлагает несколько вариантов входа для пользователя , Facebook, Twitter, Google, зарегистрируйтесь, используя свою электронную почту, и создайте пароль. В варианте регистрации электронной почты я хотел бы, чтобы вы открыли еще одно модальное окно с заполненными полями формы. Закрытие первого или замена его содержимого.

Вот мой код:

Модальный. js

import React, { Component } from 'react';

import './Modal.css';

export const ModalHeader = (props) => {
  return <div className='modal-header'>{props.children}</div>;
};

export const ModalBody = (props) => {
  return <div className='modal-body'>{props.children}</div>;
};

export const ModalFooter = (props) => {
  return <div className='modal-footer'>{props.children}</div>;
};

class Modal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalShow: '',
      display: 'none'
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({
      modalShow: 'show',
      display: 'block'
    });
  }
  closeModal() {
    this.setState({
      modalShow: '',
      display: 'none'
    });
  }

  componentDidMount() {
    this.props.isOpen ? this.openModal() : this.closeModal();
  }
  componentDidUpdate(prevProps) {
    if (prevProps.isOpen !== this.props.isOpen) {
      this.props.isOpen ? this.openModal() : this.closeModal();
    }
  }

  render() {
    return (
      <div
        className={'modal fade ' + this.state.modalShow}
        id='modalLogin'
        tabIndex='-1'
        role='dialog'
        aria-hidden='true'
        style={{ display: this.state.display }}
      >
        <div className='modal-dialog' role='document'>
          <div className='modal-content'>{this.props.children}</div>
        </div>
      </div>
    );
  }
}

export default Modal;

Заголовок. js

import React, { Component } from 'react';
import Modal, {
  ModalHeader,
  ModalBody,
  ModalFooter
} from '../utilites/modal/Modal';

import './Header.css';

class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };
    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({ modal: !this.state.modal });
  }

  render() {
    return (
      <section id='header'>
        <div className='d-flex flex-column align-items-center h-100'>
          <div className='header-title text-center'>
            DEPOISDAQUARENTENA.COM.BR
          </div>
          <div className='header-text text-center'>
            Pra onde você gostaria de pegar estrada depois da quarentena?
          </div>
          <button className='btn-primary text-center' onClick={this.toggle}>
            VOTE AQUI
          </button>
        </div>
        <Modal isOpen={this.state.modal}>
          <ModalHeader>
            <button
              type='button'
              className='close'
              aria-label='Close'
              onClick={this.toggle}
            >
              <span aria-hidden='true'>&times;</span>
            </button>
          </ModalHeader>
          <ModalBody>
            <div className='container-fluid'>
              <div className='row'>
                <div className='col text-center'>
                  <h4>Seja Bem Vindo(a).</h4>
                </div>
              </div>
              <div className='row'>
                <div className='col text-center'>
                  <h4>
                    Escolha uma das formas abaixo para votar e participar de
                    todas promoções.
                  </h4>
                </div>
              </div>
              <div className='row justify-content-center mx-auto'>
                <div className='col text-center'>
                  <div className='log-facebook mx-auto'></div>
                </div>
              </div>
              <div className='row justify-content-center mx-auto'>
                <div className='col text-center'>
                  <div className='log-twitter mx-auto'></div>
                </div>
              </div>
              <div className='row justify-content-center mx-auto'>
                <div className='col text-center'>
                  <div className='log-google mx-auto'></div>
                </div>
              </div>
              <div className='row justify-content-center mx-auto'>
                <div className='col text-center'>
                  <button
                    className='log-email mx-auto'
                    onClick={this.toggle}
                  ></button>
                </div>
              </div>
            </div>
          </ModalBody>
          <ModalFooter>
            <div className='container-fluid'>
              <div className='row'>
                <div className='col text-center'>
                  <p>
                    Ao conectar você aceita todos os termos de serviços e
                    políticas de privacidade do depoisdaquarentena.com.br.
                  </p>
                </div>
              </div>
            </div>
          </ModalFooter>
        </Modal>
      </section>
    );
  }
}
export default Header;

Как я могу делать то, что хочу? Или мне нужно придумать другой способ его применения? Спасибо.