Modal not popping up at react and sends to an empty page after click of a button

Question

Hello on ReactJS Bootstrap. When I try to click my button for the handleShow of the Modal It sends me to a blank webpage and just get's stuck there. I tried to debug and my state show changes to true but it never shows the modal.

added text since stack overflow does not want me to post if the wording is not a lot, added text since stack overflow does not want me to post, added text since stack overflow does not want me to post Any help would be appreciated.

Thanks!

 import React, { Component, useState } from "react";
    import Modal from "react-bootstrap/Modal";
    import { useHistory } from "react-router-dom";
    import Axios from "axios";
    // import Profile from '../pages/forms';
    import { Link } from "react-router-dom";
    import Form from "react-bootstrap/Form";
    
    import "../index.css";
    import { setGlobalState, useGlobalState } from "../globals/globalVar";
    
    function LoginComponent(props) {
      // const
      const [email, setEmail] = useState("");
      const [password, setPassword] = useState("");
      const [show, setShow] = useState(false);
      const history = useHistory();
      // make an axios query
    
      const url = useGlobalState("defaultUrl");
    
      const handleClose = () => setShow(false);
      const handleShow = () => setShow(true);
      const handleEmailAndpasswordVerify = () => {
        if (email.length === 0) {
          alert("Email cannot be empty.");
          return -1;
        }
        // email must contain @csub.edu
        if (!email.includes("@csub.edu")) {
          alert("Email must contain @csub.edu");
          return -1;
        }
        // if the len of password is less than 8 then reject
        if (password.length < 8) {
          alert("Password must be at least 8 characters long.");
          return -1;
        }
    
        return 0;
      };
      const handleSubmit = (e) => {
        if (handleEmailAndpasswordVerify() !== 0) {
          // if the email and password are valid then send the request to the server
          // to register
          // send the request to the server
          // if success then close the modal
          // if fail then alert the error
          return;
        }
        e.preventDefault();
        // make a post axios request to a server
        Axios.post("http://localhost:8000/index.php", {
          email: email,
          password: password,
        }).then((response) => {
          if (response.data.message) {
            console.log(response.data);
            // console.log(loginStatus);
          } else {
            // alert the error
            alert(response.data.error);
            // history.push("/main");
          }
        });
        setShow(false);
      };
    
      const login = () => {
        Axios.post(url, {
          email: email,
          password: password,
        }).then((response) => {
          if (response.data.message) {
            console.log(response.data);
            // console.log(loginStatus);
          } else {
            // setLoginStatus(response.data[0].username);
            history.push("/main");
          }
        });
      };
      //login validator
      const loginValidate = () => {
        if (email.length === 0) {
          alert("Username cannot be empty.");
          return;
        }
        if (password.length === 0) {
          alert("Password cannot be empty.");
          return;
        }
        login();
      };
    
      return (
        <div>
          <form>
            <nav className="navbar navbar-expand-lg navbar-light fixed-top">
              <div className="container">
                <Link className="navbar-brand fs-1"> StuHuB </Link>{" "}
                <div
                  className="collapse navbar-collapse"
                  id="navbarTogglerDemo02"
                ></div>{" "}
              </div>{" "}
            </nav>{" "}
            <div className="auth-wrapper">
              <div className="auth-inner">
                <h3> Sign In </h3>{" "}
                <div className="form-group">
                  <label> Login ID </label>{" "}
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Enter Login ID"
                    onChange={(e) => {
                      setEmail(e.target.value);
                    }}
                  />{" "}
                </div>{" "}
                <div className="form-group">
                  <label> Password </label>{" "}
                  <input
                    type="password"
                    className="form-control"
                    placeholder="Enter password"
                    onChange={(e) => {
                      setPassword(e.target.value);
                    }}
                  />{" "}
                </div>{" "}
                <button
                  onClick={loginValidate}
                  type="button"
                  className="btn btn-primary btn-block"
                >
                  Submit{" "}
                </button>{" "}
              </div>{" "}
              <button className="btn btn-primary btn-block" onClick={handleShow}>
                Register
              </button>
            </div>{" "}
          </form>
          {/* Not working? */}
          {/* Modal */}
          <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <Form>
                <Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
                  <Form.Label>Email address</Form.Label>
                  <Form.Control
                    type="email"
                    placeholder="[email protected]"
                    autoFocus
                    onChange={(e) => setEmail(e.target.value)}
                  />
                </Form.Group>
                {/* form password */}
    
                <Form.Item
                  name="password"
                  label="Password"
                  rules={[
                    {
                      required: true,
                      message: "Please enter password!",
                    },
                  ]}
                >
                  <input
                    type="password"
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </Form.Item>
              </Form>
            </Modal.Body>
            <Modal.Footer>
              <button variant="secondary" onClick={handleClose}>
                Close
              </button>
              <button variant="primary" onClick={handleSubmit}>
                Submit
              </button>
            </Modal.Footer>
          </Modal>
    
          {/* make a hidden modal */}
        </div>
      );
    }
    
    export default LoginComponent;