Невозможно сохранить данные формы в базе данных Atlas с помощью панели администратора

Я пытаюсь следовать этому руководству по веб-сайту заказа еды, будучи новичком, и при создании панели администратора я не могу добавить продукт, который хочу отправить через форму, в базу данных mongoose atlas, для которой я настроил это.

Вот компонент для добавления продукта питания;

import React, { useState } from "react";
import "./Add.css";
import { assets } from "../../assets/assets";
import axios from "axios"
import { toast } from "react-toastify";

const Add = () => {

  const url = "http://localhost:5173";
  const [image, setImage] = useState(false);
  const [data, setData] = useState({
    name:"",
    description:"",
    price:"",
    category:"Salad"
  })

  const onChangeHandler = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    setData(data =>({...data, [name]:value}))
  }
  
  const onSubmitHandler = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append("name", data.name)
    formData.append("description", data.description)
    formData.append("price", Number(data.price))
    formData.append("category", data.category)
    formData.append("image", image)
    const response = await axios.post(`${url}/api/food/add`, formData);
    
    if (response.data.success) {
      setData({
        name:"",
        description:"",
        price:"",
        category:"Salad"
      })
      setImage(false)
      toast.success(response.data.message)
    }
    else {
      toast.error(response.data.message)
    }
  } 

  return (
    <div className = "add">
      <form className = "flex-col" onSubmit = {onSubmitHandler}>
        <div className = "add-img-upload flex-col">
          <p>Upload Image</p>
          <label htmlFor = "image">
            <img src = {image?URL.createObjectURL(image):assets.upload_area} alt = "" />
          </label>
          <input onClick = {(e)=>setImage(e.target.files[0])} type = "file" id = "image" hidden required />
        </div>
        <div className = "add-product-name flex-col">
          <p>Product name</p>
          <input onChange = {onChangeHandler} value = {data.name} type = "text" name = "name" placeholder = "Type here" />
        </div>
        <div className = "add-product-description flex-col">
          <p>Product description</p>
          <textarea onChange = {onChangeHandler} value = {data.description}
            name = "description"
            rows = "6"
            placeholder = "Write content here"
            required
          ></textarea>
        </div>
        <div className = "add-category-price">
          <div className = "add-category flex-col">
            <p>Product category</p>
            <select onChange = {onChangeHandler} name = "category">
              <option value = "Salad">Salad</option>
              <option value = "Rolls">Rolls</option>
              <option value = "Deserts">Deserts</option>
              <option value = "Sandwich">Sandwich</option>
              <option value = "Cake">Cake</option>
              <option value = "Pure Veg">Pure Veg</option>
              <option value = "Pasta">Pasta</option>
              <option value = "Noodles">Noodles</option>
            </select>
          </div>
          <div className = "add-price flex-col">
            <p>Product price</p>
            <input onChange = {onChangeHandler} value = {data.price} type = "Number" name = "price" placeholder = "$20" />
          </div>
        </div>
        <button type = "submit" className = "add-btn">ADD</button>
      </form>
    </div>
  );
};

export default Add;

Вот репозиторий GitHub того, что я сделал на данный момент, если кто-то хочет взглянуть на бэкэнд.

Я думаю, что может возникнуть проблема с подключением администратора к серверной части или только с администратором, потому что, когда я попытался добавить продукт в базу данных с помощью Thunder Client, это сработало. Я также понятия не имею, в чем может заключаться ошибка, если она как-то связана с серверной частью.

Обновлено: при выполнении проверки компонента Add.jsx отображаются следующие ошибки;

No routes matched location "/" 
warning @ react-router-dom

Когда я пытаюсь заполнить форму, возникают ошибки;

POST http://localhost:3000/api/food/add net::ERR_CONNECTION_RESET

и

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_NETWORK"