PUT Request to JSON Server Returns 404 Not Found for Array Update

Question

I'm working on a React project using JSON Server as a mock backend, but I'm encountering a 404 Not Found error when attempting to send a PUT request to update an array of items. My JSON Server is set up with a db.json that includes an array of objects under dailyItems.

Here's a snippet of my db.json:

"dailyItems": [
    {
      "id": 1,
      "name": "Squash, Butternut",
      "category": "Produce",
      "isVisible": false
    },
    {
      "id": 2,
      "name": "Apples",
      "category": "Produce",
      "isVisible": false
    },
    {
      "id": 3,
      "name": "Kale",
      "category": "Produce",
      "isVisible": false
    },
    {
      "id": 4,
      "name": "Onions",
      "category": "Produce",
      "isVisible": false
    },

  ],

In my React app, I have the following function in Admin.js to update the visibility of items in this list at the press of a button. Admin.js contains a series of sticky buttons for each item that represent the visibility of the items on a different page. When pressed, handleSubmit should take all the selected items and update their visibility while setting all unselectd items to isVisible=false.

admin.js:

  const handleSubmit = async () => {
    try {
      // Update visibility based on selection
      const updatedDailyItems = dailyItems.map(item => ({ ...item, isVisible: !!item.checked }));
      const updatedMonthlyItems = monthlyItems.map(item => ({ ...item, isVisible: !!item.checked }));
      console.log(updatedDailyItems)
      console.log(updatedMonthlyItems)
      // Send updated lists to the server
      await axios.put('http://localhost:3000/dailyItems', updatedDailyItems);
      await axios.put('http://localhost:3000/monthlyItems', updatedMonthlyItems);
  
      navigate('/'); // Navigate to home after update
    } catch (error) {
      console.error('Error updating lists:', error);
    }
  };

However, when this function is called, I receive a 404 Not Found error. The network tab in the browser's developer tools shows that the request is being sent to the correct URL (http://localhost:3000/dailyItems) with a PUT method.

My GET and POST requests are working fine. When submitting a PUT request on thunder client, i get the same 404 error. Is there any precedence for 404s consistently for put requests?

Request URL: http://localhost:3000/dailyItems Request Method: PUT Status Code: 404 Not Found Any insights or suggestions on why this might be happening and how to resolve it would be greatly appreciated.