why PUT request is sending NULL value to sql database - postgresql

Question

when i click on EDIT button to send the form data ,insted of displaying the editted text ,it displays blank field and NULL is send to the database.
i have correctly used
app.use(express.json());
app.use(express.urlencoded({extended: true}));
this problem is only there for PUT request.POST is working fine.
Can anyone please help me ?
i am using PERN stack and have made a restful API .this is the route for Updating a field:
app.put('/placements/announcements/:id',async(req,res)=>{
try{
const {id}=req.params;
const {editPost,title}=req.body;
const updatePost= await pool.query("update announcements set an_desc=$1,an_title=$2 where an_id=$3 returning *",[editPost,title,id]);
res.json("updated");
}catch(err){
console.error(err.message);
}
});
here is the form:
<Modal
size="lg"
show={lgShow}
onHide={() => setLgShow(false)}
aria-labelledby="example-modal-sizes-title-lg"
id={`id${p.an_id}`}
>
<Modal.Header closeButton>
<Modal.Title id="example-modal-sizes-title-lg">
{p.an_title}
</Modal.Title>
</Modal.Header>
<Modal.Body>
<form onSubmit={updatePost}>
<div className="form-group">
<textarea className="form-control"
id="exampleFormControlTextarea1"
rows="3"
value={editPost}
onChange={e=>setEditPost(e.target.value)}
name="editPost"
>
</textarea>
<input type="text" value={title} onChange={e=>setTitle(e.target.value)} />
<button type="submit" value="Submit" className="btn btn-primary mt-2 float-end ">
Edit
</button>
</div>
</form>
</Modal.Body>
</Modal>
<textarea className="form-control"
id="exampleFormControlTextarea1"
rows="3"
value={editPost}
onChange={e=>setEditPost(e.target.value)}
name="editPost"
>
</textarea>
<input type="text" value={title} onChange={e=>setTitle(e.target.value)} />
<button type="submit" value="Submit" className="btn btn-primary mt-2 float-end ">
Edit
</button>
</div>
</form>
</Modal.Body>
</Modal>
and this is the update function:
const EditPost=({p,category})=>{
const [lgShow, setLgShow] = useState(false);
const [editPost,setEditPost]= useState(p.an_desc);
const [title,setTitle]=useState(p.an_title);
const updatePost= async e=>{
e.preventDefault();
try{
const body={editPost,title};
const response= await fetch(`http://localhost:5000/${category}/announcements/${p.an_id}`,{
method:"PUT",
header:{"Content-Type":"application/json"},
body: JSON.stringify(body)
})
window.location=`${category}`;
console.log("updated");
}catch(err){
console.error(err.message);
}
}