Как я могу закрыть модальный в реагировать JS после того, как я нажму кнопку отправки формы?

Я пытаюсь закрыть модель Jquery в реагировать на закрытие после отправки кнопки формы, но я пытался использовать код jquery, но не смог, поэтому не знаю, как закрыть после отправки кнопки. Поэтому, пожалуйста, помогите мне, как закрыть эту модель после отправки

Вот мой полный код.

import React, { Component } from "react";
import config from "../config";
import Demo from "./Demo";
import Electric from "./Electric";
import "./index";

export class Report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movies: [],
      selectOptions: [],
      show: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleClose() {
    this.setState({ show: false });
  }

  handleChange = e => {
    let target = e.target;
    let name = target.name;
    //here
    let value = Array.from(target.selectedOptions, option => option.value);
    this.setState({
      [name]: value
    });
  };

  async componentDidMount() {
    try {
      const res = await fetch(config.apiUrl.reportModel);
      const movies = await res.json();
      // console.log(report);
      this.setState({
        movies
      });
    } catch (e) {
      console.log(e);
    }
  }
  render() {
    return (
<div>
<a
        className="btn btn-success btn-sm bb pull-right "
        href="#ex1"
        rel="modal:open" >Open Model </a>


      <div
        id="ex1"
        class="modal"
        style={{ height: "auto", position: "relative", maxWidth: "600px" }}
      >
        <h5 className=" font-weight-bold text-dark text-left"> MAPA </h5>
        <form
          onSubmit={this.props.loaddata}
          id="frmStudent"
          style={{ marginTop: "20px" }}
        >
          <Demo />
          <ul class="nav nav-pills">
            <li class="active">
              <a
                data-toggle="pill"
                href="#home"
                className="nav-link btn-outline-success"
              >
                Uzytkownik
              </a>
            </li>
            <li>
              <a
                data-toggle="pill"
                href="#menu1"
                className=" nav-link btn-outline-success"
              >
                Elektryczny
              </a>
            </li>
            <li>
              <a
                data-toggle="pill"
                href="#menu2"
                className=" nav-link btn-outline-success"
              >
                Klasyczny
              </a>
            </li>
            <li>
              <a
                data-toggle="pill"
                href="#menu3"
                className="nav-link btn-outline-success"
              >
                Pieszo
              </a>
            </li>
          </ul>

          <br></br>

          <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
              <label>Select User</label>
              <select
                name="selectOptions"
                multiple={true}
                id="selectOptions"
                className="form-control"
                onChange={this.handleChange}
                value={this.state.selectOptions}
                style={{
                  width: "200px",
                  color: "rgba(19, 183, 96, 1.0)"
                }}
              >
                {this.state.movies.map(c => (
                  <option value={c.pk}>{c.user1}</option>
                ))}
              </select>

              <br></br>
              <label>Select Mode</label>
              <select
                multiple
                className="form-control btn-block"
                id="exampleFormControlSelect2 btn-block"
                style={{
                  width: "200px",
                  color: "rgba(19, 183, 96, 1.0)"
                }}
                name="modee"
              >
                <option value="">None</option>
                <option value="foot">Pieszo</option>
                <option value="bike">Rower Klasyczny</option>
                <option value="electric-bike">Rower Elektryczny</option>
              </select>
            </div>
            <div id="menu1" class="tab-pane fade">
              <label>Select Elektryczny </label>
              <Electric />
            </div>
            <div id="menu2" class="tab-pane fade">
              <label>Select Rower Klasyczny User</label>
              <select
                multiple={true}
                className="form-control btn-block"
                id="exampleFormControlSelect2 btn-block"
                style={{
                  width: "200px",
                  color: "rgba(19, 183, 96, 1.0)"
                }}
                // name="idd"
              >
                {this.state.movies.map(c => (
                  <option value={c.pk}>CB-{c.user1}</option>
                ))}
              </select>
            </div>
            <div id="menu3" class="tab-pane fade">
              <label>Select Pieszo User</label>
              <select
                multiple={true}
                // value={this.state.value}
                // onChange={this.handleChange}
                className="form-control btn-block"
                id="exampleFormControlSelect2 btn-block"
                style={{
                  width: "200px",
                  color: "rgba(19, 183, 96, 1.0)"
                }}
                // name="idd"
              >
                {this.state.movies.map(c => (
                  <option value={c.pk}>{c.user1}</option>
                ))}
              </select>
            </div>
          </div>

          <br></br>
          {/*  */}

          <center>
            <button
              type="submit"
              value="Get Data"
              className="btn btn-success active hide"
              id="button"
              rel="modal:close" // I used also jquery close but it did not work
              onClick={this.handleClose} // it also did not work
              style={{
                width: "200px",
                background: "rgba(19, 183, 96, 1.0)",
                padding: "7px",
                marginTop: "15px",
                marginBottom: "15px",
                fontWeight: "500"
              }}
            >
              Raport
            </button>
          </center>
        </form>
      </div>
     </div>
    );
  }
}

export default Report;

Я много пробовал, но все время терпел неудачу. Надеюсь, вы поймете из моего кода. Надеюсь, я получу помощь и решу проблему.