I'm having an issue with React. when I get data by calling an API, data comes back perfectly fine, it loads and displays in a table. On the other hand, when I tried to add data to the DB using the user interface, it works, the request returns 200, and the data is in the database, but after all is finished on the React end, the screen turns white. The proper route still shows up in the browser, yet the screen for that route turns blank after, what only seems to be POST actions. Here is my code.

component code to add an event to the DB

const AddEventModal = (props: any) => {
  const dispatch = useDispatch();
  const onSubmit = (event: any) => {
    event.preventDefault();
    let eventData: Event = {
      eventName: event.target[1].value,
      location: event.target[2].value,
      eventDate: event.target[3].value,
      startTime: event.target[4].value,
      endTime: event.target[5].value,
    };

    dispatch(addingEventToDb);
    dispatch(addEventAsyncToDB(eventData));
    props.toggleShow = false;
  };

  return (
    <MDBModal
      show={props.basicModal}
      setShow={props.setBasicModal}
      tabIndex="-1"
    >
      ......tsx code
    </MDBModal>
  );
};

Here is what the Thunk looks like.

export const addEventAsyncToDB = (event:Event) => {
    return (dispatch:any) => {
        return addEvent(event).then(res => {
            dispatch(addedEventToDBAction(res?.data));
        })
    }
}

And here is the actual AJAX code thats being called

export const addEvent = async (event: Event) => {
    try{
        const res = await axios.post(`${baseURI}/Events`, event);
        return res;
    }
    catch(e){
        console.log(e);
    }
}