Local Storage with React Component - store the state

VideoCard.jsx

import React, { useEffect, useState } from "react";
import "./VideoCard.css";
import { useNavigate } from "react-router-dom";
import { MdOutlineWatchLater } from "react-icons/md";
import { useData } from "../../context/DataContext";

export const VideoCard = ({ videoInfo }) => {
  const { title, creator, thumbnail, views, category, _id } = videoInfo;
  const navigate = useNavigate();
  const { dispatch } = useData();

  const [ likes, setLikes ] = useState(0);
  
  useEffect(() => {
    console.log("Use Effect")
    let likesCount = localStorage.getItem("likes")
    if( !likesCount ){
      localStorage.setItem("likes", 0)
    } else {
      setLikes(likesCount)
    }    
  }, [])

  const setLikesCount = () => {
    let likesCount = localStorage.getItem("likes")
    likesCount++
    setLikes(likesCount)
    localStorage.setItem("likes", likesCount)
  }
  
  return (
    <div
      className="card-wrapper video-card"
    >
      <div
        className="video-content-wrapper"
        onClick={() => {
          navigate(`/video/${_id}`);
        }}
      >
        <div className="video-card-img-container">
          <img src={thumbnail} alt={title} className="video-card-img" />
        </div>
        <div className="video-card-details">
          <div className="detail-img-section">
            {" "}
            <img
              src="https://picsum.photos/40/40"
              alt={title}
              width="50"
              height={50}
              className="detail-img"
            />
          </div>
          <div>
            <p className="video-title">{title}</p>
            <p className="video-category">{category}</p>
            <p className="video-views-creator">
              {views} views | {creator}
            </p>
          </div>
        </div>
      </div>
      
      {/* Wtach later button */}
      
      <div
        className="watch-later-wrapper watch-later-icon"
        onClick={() => {          
          console.log("Clicked likes");
          setLikesCount();
          // dispatch({ type: "ADD_TO_WATCHLATER", payload: videoInfo });
        }}
      >
        <MdOutlineWatchLater  />
      </div>
      <div >
        <h1>Liked {likes} times</h1>
      </div>
    </div> // card-wrapper 
    
  )
};