When my form submitts I get: Failed to load resource: the server responded with a status of 400 (Bad Request) | Cannot GET /api/auth/createEvent

Question

I have a mern project boilerplate with authentication. I want to practice by creating a service simalr to eventbrite. I added a form to the boilerplate and now I want to direct the form data to mongodb. I Attempted to make my own post request but when the form is submitted I get the error: Cannot GET /api/auth/createEvent with a blue link beside it that when clicked opens a new tab that just says: Cannot GET /api/auth/createEvent.

Heres my code: models/EventSchema.js

const mongoose = require('mongoose');

const EventSchema = new mongoose.Schema({
    // Define the fields of the user object collected from the form
    eventid: String,
    title: String,
    description: String,
    location: String, 
    startDate: String, 
    endDate: String, 
    startTime: String,
    endTime: String, 
    timezone: String,
    numOfParticipants: Number,
    tickets: Array, 
    // Add other fields as necessary
});

const Event = mongoose.model('Event', EventSchema);

module.exports = Event;

client/src/components/EventForm.js

    const handleSubmit = async () => {
        // Validate form data here
        // Check if start date and time are before end date and time
        if (formData.startDate > formData.endDate || (formData.startDate === formData.endDate && formData.startTime >= formData.endTime)) {
            setErrorMessage("End date and time must be after start date and time");
            return;
        }

        const generateEventId = () => {
            const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
            let eventId = '';
            for (let i = 0; i < 20; i++) {
                eventId += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return eventId;
        };
    
        const eventId = generateEventId();
        formData.eventIdNumber = eventId;



        // If all validation passes
        console.log(formData);

        try {
            const response = await fetch("/api/auth/createEvent", {
              method: "POST",
              headers: {
                "Content-Type": "application/json"
              },
              body: JSON.stringify(formData)
            });
            
            if (response.ok) {
              const data = await response.json();
              console.log("Event created successfully:", data);
              // Handle success
            } else {
              console.error("Failed to create event:", response.statusText);
              // Handle failure
            }
          } catch (error) {
            console.error("Error creating event:", error.message);
            // Handle error
          }


        // Clear form data
        setFormData({
            eventId: '',
            title: '',
            description: '',
            location: '',
            startDate: '',
            endDate: '',
            startTime: '',
            endTime: '',
            timezone: '',
            numOfParticipants: '',
            tickets: [],
        });
        // Close modal
        handleClose();
    };

routes/auth.js

const express = require("express");

const {
  register,
  login,
  createEvent,
  forgotPassword,
  resetPassword,
} = require("../controllers/auth");

const router = express.Router();

router.route("/register").post(register);
router.route("/login").post(login);
router.route("/forgotPassword").post(forgotPassword);
router.route("/resetPassword/:resetToken").put(resetPassword);
router.route("/createEvent").post(createEvent)

module.exports = router;

routes/private.js

const express = require("express");

const { getPrivateData } = require("../controllers/private");
const { protect } = require("../middleware/auth");

const router = express.Router();

router.route("/").get(protect, getPrivateData);

module.exports = router;

controllers/auth.js

// @description     Create an event
// @route           POST /api/auth/createEvent
// @access          Public
const createEvent = async (req, res, next) => {
  try {
    const { eventId, title, description, location, startDate, endDate, startTime, endTime, timezone, numOfParticipants} = req.body;
    if (!eventId || !title || !description || !location || !startDate || !endDate || !startTime || !endTime || !timezone || !numOfParticipants) { 
      return next(
        new ErrorResponse("Something went wrong, please try again. :(", 400)
      );
    }

    const eventExists = await Event.findOne({ eventid }).exec();

    if (eventExists) {
      return next(new ErrorResponse("Event already exists", 400));
    }

    const event = await Event.create(
          {
            eventid,
            title,
            description,
            location,
            startDate,
            endDate,
            startTime,
            endTime,
            timezone,
            numOfParticipants
          }
    );
    return sendAuth(event, 201, res);
  } catch (error) {
    return next(error);
  }
};

const sendAuth = (user, statusCode, res) => {
  return res.status(statusCode).json({
    success: true,
    name: user.name,
    email: user.email,
    profilePic: user.profilePic,
    token: user.getSignedToken(),
    expires_at: new Date(Date.now() + process.env.JWT_EXPIRE * 60 * 60 * 1000),
  });
};

module.exports = { register, login, forgotPassword, resetPassword, createEvent };

A few of the files were a bit long so I've only included the code blocks I feel a relevant, please let me know if more information is needed. Also heres package.json and server.js

package.json

{
  "name": "mern-stack-authentication-boilerplate",
  "version": "1.0.0",
  "description": "Ultimate MERN Stack Authentication Boilerplate for production use",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rtewari056/mern-stack-authentication-boilerplate.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rtewari056/mern-stack-authentication-boilerplate/issues"
  },
  "homepage": "https://github.com/rtewari056/mern-stack-authentication-boilerplate#readme",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "http-proxy-middleware": "^2.0.6",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.7.2",
    "nodemailer": "^6.8.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.20"
  }
}

server.js

const express = require("express");
const path = require("path");
const dotenv = require("dotenv");
dotenv.config({ path: "./.env" });

const connectDB = require("./config/db");
const errorHandler = require("./middleware/error");

const app = express();
app.use(express.json());
connectDB(); // Connect to databse

// API Routes
app.use("/api/auth", require("./routes/auth"));
app.use("/api/private", require("./routes/private"));

// --------------------------DEPLOYMENT------------------------------

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "./client/build")));

  app.get("*", (req, res) => {
    return res.sendFile(
      path.resolve(__dirname, "client", "build", "index.html")
    );
  });
} else {
  app.get("/", (req, res) => {
    res.send("API is running");
  });
}

// --------------------------DEPLOYMENT------------------------------

// Error Handler Middleware (Should be at the end of all middlewares)
app.use(errorHandler);

const PORT = process.env.PORT || 5000;

const server = app.listen(PORT, () =>
  console.log(`Server running on PORT ${PORT}`)
);

// Handling server errors with clean error messages
process.on("unhandledRejection", (err, promise) => {
  console.log(`Logged Error: ${err.message}`);
  server.close(() => process.exit(1));
});