Why can't I use PUT requests?

Question

I don't understand why my http PUT requests can't send data back to the database, even though I checked in the console and made sure the data has changed.

import React, { useEffect, useState } from 'react'

import './Win_Put_Data.css'
import axios from 'axios'

const Win_Put_Data = ({databaseRow}) => {

  const [post, setPost] = useState({
    _id: {},
    name: '',
  });

  console.log("post test",post,databaseRow)

  useEffect(() => {
    setPost(databaseRow)
  },[])


  const handlechange= (e) => {
    const dataClone = {...post}
    dataClone[e.target.name] = e.target.value;
    setPost(dataClone)
    console.log("setpost",post,post.name)
  }

  const putdata = (e,id) => {
    e.preventDefault();
    axios.put(`http://localhost:5000/Data_Product/${id}`,{post})
    .then((res) => console.log('true',res,post))
    .catch((err) => console.log(err))
  }

  return (
    <div>
      <div className='model-container'>
        <div className='model'>Solve_Data
          <form>
            <div className='form-group'>
              <label htmlFor='ID'>ID</label>
              {/* <input name='ID' value={i.id}/> */}
            </div>
            <div className='form-group'>
              <label  htmlFor='NAME'>NAME</label>
              <input type='text' name='name' onChange={handlechange} value={post.name} />
            </div>
            <div className='form-group'>
              <label  htmlFor='PRICE'>PRICE</label>
              {/* <input type='text' name='PRICE' value={prices}/> */}
            </div>
            <div className='form-group'>
              <label htmlFor='QUANTITY'>QUANTITY</label>
              {/* <input name='QUANTITY' value={i.quantity}/> */}
            </div>
            <button type='submit' className='btn' onClick={(e) => {putdata(e,post._id)}}>Submit</button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default Win_Put_Data

The frontend I'm using is react, backend is js and database is mongodb.

I've tried testing the system in the console by comparing the post interpreter with the databaseRow interpreter. Done and make sure the data has been changed. Of course, the console when doing the PUT requests had the data changed but it wasn't recorded in the database at all.

Right now I have 4 pieces of data, but I'm only testing one. Pretty sure this has nothing to do with the error I'm experiencing right now. Because the data in the post translator has no empty fields, even the param.id field.

databaseRow interpreter Taken from the GET requests information from the previous page.

I want to solve this problem by using axios and don't want to use fetch. But if really can't. I can switch to fetch.

If this is an easy problem for you guys, I apologize here.