Why the blog data is not passing to the database? - node.js

Question

I am working on a simple CRUD project with the MERN stack.
In the project, I'm trying to update the blog for the particular article. But it's not updating the blogs collection.
index.js
app.put('/updateblog/:id', async (req, res) => {
const newBlogTitle = req.body.newBlogTitle;
const newBlogAuthor = req.body.newBlogAuthor;
const newBlogContent = req.body.newBlogContent;
const {id} = req.params;
console.log(id);
try{
await Blog.findByIdAndUpdate( id , (err , updatedBlog) => {
updatedBlog.blogTitle = newBlogTitle;
updatedBlog.blogAuthor = newBlogAuthor;
updatedBlog.blogContent = newBlogContent;
updatedBlog.save();
res.send("updated");
})
}catch(error){
console.log(error);
}
})
Edit.js
Using aixos to get the post all the post details:
useEffect(() => {
axios.get("http://localhost:5000/blogList" )
.then((response) => {
setContent(response.data)
console.log(response.data)
})
}, [])
Update the data using put method
const log = async(e) => {
e.preventDefault();
if (editorRef.current) {
console.log(editorRef.current.getContent());
//setContent(editorRef.current.getContent());
setNewBlogContent(editorRef.current.getContent())
}
try{
await axios.put('http://localhost:5000/updateblog/' + id, {
newBlogTitle,
newBlogAuthor,
newBlogContent
}).then(response => {
console.log(response.data);
console.log('Blog successfully updated')
navigate('/blog')
}).catch((error) => {
console.log(error)
})
}catch(error){
console.log(error);
}
}
if (!content) return null;
Blog Section
<div className="container">
<div className='fw-bold text-center mt-3 fs-1'>Edit Content</div>
<form onSubmit={log}>
{content.filter(cnt => cnt._id === id )
.map(cDetails => (
<div key={cDetails._id}>
<div className='container'>
<div className='container bg-light mt-3 p-3'>
<label for="Blogtitle" className="form-label mt-3">Blog Title</label>
<input type='text' name="title" id="Blogtitle" className=' mt-3 form-control' required
value={newBlogTitle}
onChange={e => setNewBlogTitle(e.target.value)} placeholder={cDetails.blogTitle} />
<label for="BlogAuthor" className="form-label mt-3">Blog Title</label>
<input type='text' name="authorName" id="BlogAuthor" className=' mt-3 form-control'
value={newBlogAuthor} required
onChange={e => setNewBlogAuthor(e.target.value)} placeholder={cDetails.blogAuthor} />
{/* <div className=' bg-light mt-3 text-muted fst-italic text-end px-4'> - By {cDetails.blogAuthor}</div> */}
</div>
<div className='container mt-5'>
<Editor
onInit={(evt, editor) => {
setNewBlogContent(editor.getContent({format: 'html'}));
}}
initialValue={cDetails.blogContent}
onEditorChange={(newValue, editor) => {
setNewBlogContent(editor.getContent({format: 'html'}));
}}
/>
</div>
</div>
</div>
) )
}
<button type='submit' className="btn btn-primary mt-3 mx-4" >Update editor content</button>
</form>
</div>
</div>
The content state example output,