Cannot type into input field in form ( React.js - Bootstrap) ( Not able to enter in any value in the input fields )

I can place the cursor on it but I am not able to enter any value from the keyboard into the input fields. Everything else works fine though, the form submits also (thought with empty data cause I can't type in it) what can be done to fix this ?

I have four fields: fullname, phone number, email address and message.

import React, { useState } from "react";
import emailjs from "emailjs-com";

const Contact = () => {
  const [data, setData] = useState({
    fullname: "",
    phone: "",
    email: "",
    mesge: "",
  });

  const InputEvent = (event) => {
    const { name, value } = event.target;

    setData((preVal) => {
      return {
        ...preVal,
        [name]: value,
      };
    });
  };

  const formSubmit = (e) => {
    e.preventDefault();

    emailjs
      .sendForm(
        "gmail",
        "template_2eqdavu",
        e.target,
        "user_MPrsmYCTpYmxdtv6ZBwjH"
      )
      .then(
        (result) => {
          console.log(result.text);
        },
        (error) => {
          console.log(error.text);
        }
      );
    e.target.reset();
  };
  return (
    <>
      <div className="my-5">
        <h1 className="text-center"> Contact us</h1>
      </div>
      <div className="container contact_div">
        <div className="row">
          <div className="col-md-6 col-10 mx-auto">
            <form onSubmit={formSubmit}>
              <div className="form-group">
                <label for="exampleFormControlInput1">Full Name</label>
                <input
                  type="text"
                  class="form-control"
                  id="exampleFormControlInput1"
                  name="fullname"
                  value={data.fullname}
                  onchange={InputEvent}
                  placeholder="Enter your full name"
                />
              </div>
              <div class="form-group">
                <label for="exampleFormControlInput1">Phone Number</label>
                <input
                  type="number"
                  class="form-control"
                  id="exampleFormControlInput1"
                  name="phone"
                  value={data.phone}
                  onchange={InputEvent}
                  placeholder="Enter your Phone number"
                />
              </div>
              <div class="form-group">
                <label for="exampleFormControlInput1">Email address</label>
                <input
                  type="number"
                  class="form-control"
                  id="exampleFormControlInput1"
                  name="email"
                  value={data.email}
                  onchange={InputEvent}
                  placeholder="name@example.com"
                />
              </div>

              <div class="form-group">
                <label for="exampleFormControlInput1">Message</label>
                <input
                  type="number"
                  class="form-control"
                  id="exampleFormControlInput1"
                  name="mesge"
                  value={data.mesge}
                  onchange={InputEvent}
                  placeholder="mssg"
                />
              </div>

              <div class="col-12">
                <button class="btn btn-outline-primary" type="submit">
                  Submit form
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
};

export default Contact;