React form inputs not clickable

I’m having problems with clicking my form inputs… I can only click the first one ate the top, the rest… it like they are disabled or something (But the second one is clickable if I decrease the width of my browser which is really weird)… this is my code.

import {useState} from 'react';


const Modal = ({open, close, submitForm}) => {

    const [task, setTask] = useState('');
    const [cat, setCat] = useState('');
    const [deadline, setDeadline] = useState('');

    const handleSub = (e) => {
        e.preventDefault();
        
        submitForm({'task': task, 'cat': cat, 'ddln': deadline});

        setTask('');
        setCat('');
        setDeadline('');
    }
    if(!open){
        return (

            <div className="myOverlay">
                <div className="myModal">
                    <strong onClick={close}>X</strong><br />
                    <form method="post" onSubmit={handleSub} >
                      <div className="form-group">
                        <label htmlFor="exampleInputEmail1">Task</label>
                        <input type="text" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter task" name="task" value={task} onChange={(e) =>setTask(e.target.value)}/>
                      </div><br />
                      <div className="form-group">
                          <select className="form-control" defaultValue={cat} id="inlineFormCustomSelectPref" name="cat" onChange={(e) =>setCat(e.target.value)}>
                            <option>Task category</option>
                            <option value="Tech">Tech</option>
                            <option value="Marketing">Marketing</option>
                            <option value="Financial">Financial</option>
                            <option value="Admin">Admin</option>
                          </select>
                      </div>
                      <br />
                      <div className="form-group">
                        <label htmlFor="exampleInputPassword1">Deadline</label>
                        <input type="date" className="form-control" id="exampleInputPassword1" placeholder="Deadline" name="ddln" value={deadline} onChange={(e) =>setDeadline(e.target.value)}/>
                      </div>
                      <div className="form-check">
                        <input type="checkbox" className="form-check-input" id="exampleCheck1" />
                        <label className="form-check-label" htmlFor="exampleCheck1">Make Task Active</label>
                      </div> <br />
                      <input type="submit" className="btn btn-dark" value="Submit"/>
                    </form>
                </div>
            </div>

        );
    }
}

export default Modal

That is my form controller and it is a modal.

import { Outlet } from 'react-router-dom';
import { useState } from 'react';
import Sidebar from './Sidebar';
import Modal from './Modal';

import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';


const Root = () => {
  const [ modal, setModal ] = useState(true);

  const [ page, setPage ] = useState('home');

  const addFormHandle = async (formData) => {

          const res = await fetch('http://127.0.0.1:8000/api/tasks/add', {

              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(formData),

          })

          if (res.ok) {
            //throw new Error('Network response was not ok');

            toast.success('Task added successfully', {
              position: "top-right",
              autoClose: 5000,
              hideProgressBar: false,
              closeOnClick: true,
              pauseOnHover: true,
              draggable: true,
              progress: undefined,
              theme: "dark",
            });
          }
          else
          {
            toast.error('Task failed to add please check network connection!!!', {
            position: "top-right",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "dark",
            });
          }
          setModal(true);
      //console.log(formData);
      
  }

      
  return(

    <div className='row'>

      <div className="col-md-2">
        <Sidebar page={setPage}  />

      </div>

          <div className="col-md-10">
            <main className="main-sec container">
                <Outlet />
            </main>

            <Modal open={modal} close={()=>setModal(true)} submitForm={addFormHandle} />
      
          </div>

          <div className="myContainer">
              <button className="btn btn-dark fixed-button" onClick={()=>setModal(false)}>Add Task</button>
          </div>

          
      </div>
    )
}

export default Root;

This is my root controller… I used react-toastify on it (the problem kind of started the same time I added it… but was kind of on and off until it was just on… it was weird I event thought my pc was crashing so I restarted it but the problem remained).

import { createBrowserRouter, createRoutesFromElements, Route, Outlet, RouterProvider} from 'react-router-dom';
import { useState } from 'react';
import Sidebar from './Components/Sidebar';
import Cards from './Components/Main/Cards';
import Table from './Components/Main/Table';
import Modal from './Components/Modal';
import Deadlines from './Components/Deadlines';
import Home from './Components/Home';
import Tasks from './Components/Tasks';
import Inoives from './Components/Inoives';
import Root from './Components/Root';
import DataLoada from './DataLoada.js';
import { ToastContainer } from 'react-toastify';

function App() {

  const router = createBrowserRouter(
      
      createRoutesFromElements(
          <Route path="/" element={<Root />}>
              <Route index element={<Home />} />
              <Route path="/deadlines" element={<Deadlines />} />
              <Route path="/tasks" element={<Tasks />} loader={DataLoada} />
              <Route path="/invoices" element={<Inoives />} />
          </Route>
      )

  )

  return (
    <>
      <RouterProvider router={router} />
      <ToastContainer />
    </>
  );
}

export default App;

This is my App.js file… I added the toast container here.

I tried looking at the backend. I thought maybe the problem was it… I don’t think it was.