getting network error while trying to pass data to backend - reactjs

Question

I'm trying to build a calendar function where you can save the data you introduce to the database so it gets added as an event. The calendar is build with the fullcalendar module for React.
Here is the error I'm getting:
POST localhost:4000/events/create-event net::ERR_FAILED
Here is my models code:
const mongoose = require("mongoose")
const EventSchema = mongoose.Schema({
start: { type : Date, required: false },
end: { type : Date, required: false },
title: { type: String, required: false }
})
const Events = mongoose.model("events", EventSchema)
Here is where the event gets added:
const express = require('express');
const router = express.Router();
const moment = require("moment")
const Events = require('../models/events.js')
router.route('/create-event').post((req, res) => {
const events = {
events:req.body.event
}
const newEvent = new Events(events)
newEvent.save()
.then (() => res.json(newEvent))
.catch(err => res.status(400).json('error' + err))
})
router.route('/get-events').get((req, res) => {
Events.find({start: {$gte: moment(req.query.start).toDate()}, end: {$lte: moment(req.query.end).toDate()}})
.then(event => res.json(event))
.catch(err => res.status(400).json('Error:' + err))
})
module.exports = router
Here is the full code for client side:
import React, {useState, useRef} from 'react';
import FullCalendar from '#fullcalendar/react' // must go before plugins
import dayGridPlugin from '#fullcalendar/daygrid' // a plugin!
import AddEvent from './AddEvent.js'
import axios from "axios"
import moment from "moment"
import "react-datetime/css/react-datetime.css";
function CalendarSection() {
const [modalOpen, setModalOpen] = useState(false)
const [events, setEvents] = useState([])
const calendarRef = useRef(null)
console.log(events)
const onEventAdded = (event) => {
let calendarApi = calendarRef.current.getApi()
calendarApi.addEvent({
start: moment(event.start).toDate(),
end: moment(event.end).toDate(),
title: event.title
})
}
const handleEventAdd = (data) => {
console.log(data.event)
axios.post("localhost:4000/events/create-event", data.event)
}
const handleDateSet = async (data) => {
const response = await axios.get("localhost:4000/events/get-events?start=" +moment(data.start).toISOString() +"&end="+moment(data.end).toISOString())
setEvents(response.data)
}
return (
<section>
<button onClick={() => setModalOpen(true)}>Add Event</button>
<div style={{position: "relative", zIndex: 0}}>
<FullCalendar
ref={calendarRef}
events={events}
plugins={[ dayGridPlugin ]}
initialView="dayGridMonth"
eventAdd={(event) => handleEventAdd(event)}
dateSet={(date)=> handleDateSet(date)}
/>
</div>
<AddEvent isOpen={modalOpen} onClose={() => setModalOpen(false)} onEventAdded={event => onEventAdded(event)} />
</section>
)
}
export default CalendarSection
Here is the Add Event component:
import React, {useState} from 'react'
import Modal from "react-modal"
import Datetime from 'react-datetime';
function AddEvent({isOpen, onClose, onEventAdded}) {
const [title, setTitle] = useState("")
const [start, setStart] = useState(new Date())
const [end, setEnd] = useState(new Date())
const onSubmit = (e) => {
e.preventDefault()
onEventAdded({
title,
start,
end
})
onClose()
}
return (
<Modal isOpen={isOpen} onRequestClose={onClose}>
<form onSubmit={onSubmit}>
<input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
<div>
<label>Start Date</label>
<Datetime value={start} onChange={date => setStart(date)} />
</div>
<div>
<label>End Date</label>
<Datetime value={end} onChange={date => setEnd(date)} />
</div>
<button>Add Event</button>
</form>
</Modal>
)
}
export default AddEvent