DELETE fetch react js

i need help here i cant delet my date from mongodb i think theres problem with the server.

this error come everytime i press delet button,

i can add date to my mongodb but i can delet date

it can find the id but cant connect to the server for delert

the error App.js:45

DELETE http://localhost:3000/s/5 404 (Not Found)


import "./App.css"; import { Table } from "./components/Table"; import { Modal } from "./components/Modal";

function App() {   const [modalOpen, setModalOpen] = useState(false);   // start code to recive date from our API system   const [rows, setRows] = useState([
    {
      date: "",
      description: "",
      status: "",
      cantidad: ""
    }   ]);

 useEffect (()=>{   fetch("/s").then(res=> { 
    if(res.ok) {
      return res.json()
    }
    }).then(jsonRes => setRows(jsonRes));   },[]);  // we can  put [] for stoping fetch to load alot of data https://stackoverflow.com/questions/56926282/react-hooks-fetch-wont-stop-fetching  // end code to recive date from our API system

  const [rowToEdit, setRowToEdit] = useState(null);

     const handleDeleteRow = (targetIndex) => {    fetch(`/s/${targetIndex}`,  
      {method: "DELETE",
        })
    .then((response)=>{
    if(!response.ok){
        throw new Error("net no work");
      }
       return response.json();   })   .then(()=>{
    setRows(rows.filter((_, idx)=>  idx !==targetIndex));
       })
    .catch((error)=> console.log("error dele:", error));
   
    };
      const handleSubmit = (rows) => {
    rowToEdit === null
      ? setRows([rows])
      : setRows(
          rows.map((currRow, idx) => {
            if (idx !== rowToEdit) return currRow;

            return rows;
          })
        );   };

  return (
      <div> <h1 className="h1">Control de Helados</h1>
      <div className="App">
      <Table rows={rows} deleteRow={handleDeleteRow} editRow={handleEditRow} />

      <button onClick={() => setModalOpen(true)} className="btn">
        Add
      </button>

      {modalOpen && (
        <Modal
          closeModal={() => {
            setModalOpen(false);
            setRowToEdit(null);
          }}
          onSubmit={handleSubmit}
          defaultValue={rowToEdit !== null && rows[rowToEdit]}
        />

      ) }
      
    </div>
    </div>   ); }

export default App; ```