I used react-bootstrap v1.6.1 (Bootstrap 4.6) Modal. in modal I added input box but when write whitespace(space) in input box it's not working

Question

I used react-bootstrap in my react application. I used react-bootstrap modal component and I added input box on modal components but in input box I can write character but space (whitespace) is not working even I cant implement submit onclick button. I don't why. please help me.

I try my best but still don't solved yet.

here is my code

import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";
import { rfs } from "../firebase";

function Subscribe(props) {
  const [fullName, setFullName] = useState("");
  const [email, setEmail] = useState("");
  const [engLevel, setEngLevel] = useState("");
  const [exp, setExp] = useState();
  const [specialize, setSpecialize] = useState("");
  const [show, setShow] = useState(props.active);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const handleSubscibe = (event) => {
    event.preventDefault();
    sendFormData2();
    setFullName("");
    setEmail("");
    setExp("");
    setSpecialize("");
    setEngLevel("");
    handleClose();
  };

  const sendFormData2 = () => {
    rfs.collection("subscription").add({
      FullName: fullName,
      email: email,
      experience: exp,
      specialize: specialize,
      English: engLevel,
    });
  };

  return (
    <>
      <Button variant="success" onClick={handleShow}>
        Subscribe
      </Button>

      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header
          style={{ background: "#192734", color: "#fff" }}
          closeButton
        >
          <Modal.Title>
            <span className="">
              Stay up to date with the latest job offers for developers in
              LATAM!
            </span>
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="">
            <form method="post" onSubmit={handleSubscibe}>
              <div className="form-group">
                <input
                  type="text"
                  className="form-control"
                  placeholder="Full Name"
                  value={fullName}
                  onChange={(e) => setFullName(e.target.value)}
                  required
                />
              </div>
              <div className="form-group">
                <input
                  type="email"
                  className="form-control"
                  placeholder="Email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required
                />
              </div>

              <div className="form-group">
                <input
                  type="text"
                  className="form-control w-100"
                  placeholder="Year of experience"
                  value={exp}
                  onChange={(e) => setExp(e.target.value)}
                  required
                />
              </div>
              <div className="form-group">
                <input
                  type="text"
                  className="form-control"
                  placeholder="Programming languages/frameworks you know."
                  value={specialize}
                  onChange={(e) => setSpecialize(e.target.value)}
                  required
                />
              </div>

              <div className="form-group">
                <label htmlFor="" className="">
                  English Level
                </label>
                <select
                  value={engLevel}
                  onChange={(e) => setEngLevel(e.target.value)}
                  className="form-control "
                >
                  <option className="" defaultValue>
                    Basic(A1,A2)
                  </option>
                  <option className=" ">Intermediate(B1,B2)</option>
                  <option className="">Advanced(C1,C2)</option>
                </select>
              </div>
              <div className="text-center">
                <button type="submit" className="text-center btn btn-success">
                  Subscribe
                </button>
              </div>
            </form>
          </div>
        </Modal.Body>
      </Modal>
    </>
  );
}

export default Subscribe;