When I click add to favorites (add to local storage but not update the count, when I click the button ref, the count is updated, I am doing this for my e-commerce project, I have a wish list. When I When adding an item to wishlist, I add the item to local storage. I need to display the number of items I added to wishlist. I don't know how to automatically render the header when the value (local storage) changes.

I added a button that calls cou via onClick. When I add the item to the wishlist, nothing happens (no rendering) and when I click the button everything is fine. Can anyone help? Everything is on the header component (page)

const [count, setCount] = useState((JSON.parse(localStorage.getItem("liked")))); const cou = () => { let oldData = JSON.parse(localStorage.getItem('liked') || "[]") if (oldData.length === count.length) { setCount((JSON.parse(localStorage.getItem("liked")))) } else { setCount((JSON.parse(localStorage.getItem("liked")))) } }; useEffect(() => { let oldData = JSON.parse(localStorage.getItem('liked') || "[]") if (oldData.length === count.length) { setCount((JSON.parse(localStorage.getItem("liked")))) } else { setCount((JSON.parse(localStorage.getItem("liked")))) } }, [(count.length)]);

This is the span on the header

{count.length}