How to add pin note feature in React, Node and Mongoose? - node.js

Question

I wanna add the pin feature. When a note is pinned the icon color will be green and when it's not pinned, the icon should be black. when I click the pin button, the database is updating but the color is not changing. The color is changing when I reload the page.
I was trying but I couldn't.
This is the code of the child component
import React, { useState } from 'react';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faPenToSquare, faTrash, faExpand, faThumbTack } from '#fortawesome/free-solid-svg-icons';
import { Link } from 'react-router-dom';
import axios from 'axios';
const SingleNote = ({ note, pinned, setPinned }) => {
const { title, body, _id, pinStatus } = note;
const handlePin = () => {
pinStatus ? axios.put(`http://localhost:5000/notes/pin/${_id}`, { pinStatus: false })
.then(res => {
res.status === 200 && setPinned(false)
})
:
axios.put(`http://localhost:5000/notes/pin/${_id}`, { pinStatus: true })
.then(res => {
res.status === 200 && setPinned(true)
})
}
return (
<div className="rounded bg-white overflow-hidden transition-all duration-300 shadow-lg hover:shadow-purple-100">
<div className="px-6 py-4 relative">
<p className="font-bold text-xl mb-2 font-serif">
{
title.length > 19 ? `${title.slice(0, 20)}...` : title
}
</p>
<button className='absolute top-3 right-3' onClick={handlePin}>
<FontAwesomeIcon
icon={faThumbTack}
className={
pinStatus ? 'text-emerald-500' : 'text-black'
}
/>
</button>
<hr />
<p className="text-gray-700 text-base">
{
body.length > 99 ? `${body.slice(0, 100)}...` : body
}
</p>
</div>
<div className="px-6 pt-4 pb-2 flex justify-end">
<Link to={`/notes/${_id}`}>
<button className='btn-c btn'>
<FontAwesomeIcon icon={faExpand} />
</button>
</Link>
<Link to={`/edit/${_id}`}>
<button className='btn-b btn'>
<FontAwesomeIcon icon={faPenToSquare} />
</button>
</Link>
<button className='btn-a btn'>
<FontAwesomeIcon icon={faTrash} />
</button>
</div>
</div>
);
};
export default SingleNote;
This is the parent component
const AllNotes = () => {
const [pinned, setPinned] = useState(false);
const [notes, setNotes] = useState([])
useEffect(() => {
fetch(`http://localhost:5000/notes/`)
.then(res => res.json())
.then(data => {
setNotes(data)
})
}, [pinned])
return (
<>
<Header />
<div className='container mx-auto'>
<div className='p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5'>
{
notes.map((note) => <SingleNote
key={note._id}
note={note}
pinned={pinned}
setPinned={setPinned}
/>)
}
</div>
<Link to='/addNote'>
<button
className='fixed right-5 bottom-5 md:right-10 md:bottom-10 h-10 w-10 sm:w-12 sm:h-12 bg-emerald-600 hover:bg-emerald-700 transition-all duration-300 text-white rounded-full'
>
<FontAwesomeIcon icon={faPlus} />
</button>
</Link>
</div>
</>
);
};
export default AllNotes;