I’m new to react.js and here’s the problem I’m facing. I have posts that are written by users and each user can like each post. After that, I show how many likes each post has. But the problem is that the number of likes is updated only if I reload the page. I don’t understand how to do this correctly

import React, { useEffect, useState } from "react";
import { NavLink } from "react-router-dom";

export default function Postcard({ post, deleteHandler, userIDSession }) {
  const [likes, setLikes] = useState({});
  const [getLike, setGetLike] = useState([]);

  const handleLikes = async () => {
    try {
      const responce = await fetch(`/api/likes/${post.id}`, {
        method: "POST",
        headers: { "Content-type": "application/json" },
        body: JSON.stringify(likes),
      });
      if (responce.ok) {
        setLikes(responce.data);
      }
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetch(`/api/likes/${post.id}`, { method: "GET" })
      .then((res) => res.json())
      .then((data) => setGetLike(data))
      .catch((err) => console.log(err));
  }, []);

  const likeUserID = getLike
    .filter((like) => like.user_id === userIDSession)
    .pop();

  return (
    <>
      {userIDSession !== post.user_id ? (
        <div className="containerposts" key={post.id}>
          <div className="comment__container">
            <div className="comment__card">
              <p>{post.title}</p>
              <div className="comment__footer">
                <div className="author__info">
                  <div className="author__time">
                    Создано{" "}
                    <span>
                      {`${new Date(
                        Date.parse(postDate.createdAt)
                      ).toLocaleString()}`}
                    </span>
                  </div>
                  <div className="author__name">
                    Автор
                    <span>{` ${postDate?.User?.userName}`}</span>
                  </div>
                </div>
                <NavLink
                  onClick={handleLikes}
                  className={`fa fa-thumbs-up ${
                    userIDSession === likeUserID?.user_id
                      ? "thumbs__like__active"
                      : ""
                  }`}
                />
                <span className="like__thumbs">{getLike.length}</span>
                <NavLink
                  onClick={handleDisLikes}
                  className="fa fa-thumbs-down"
                />{" "}
                <span className="dislike__thumbs">{getDisLike.length}</span>
                <NavLink
                  to={`/commentpost/${post.id}`}
                  className="show__replays"
                >
                  {`replay ${counterComment.length}`}
                </NavLink>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="containerposts" key={post.id}>
          <div className="comment__container">
            <div className="comment__card">
              <p>{post.title}</p>
              <div className="comment__footer">
                <NavLink onClick={handleLikes} className="fa fa-thumbs-up" />
                <i className="fa fa-thumbs-down" />
                <NavLink
                  to={`/commentpost/${post.id}`}
                  className="show__replays"
                >
                  {" "}
                  {`replay ${counterComment.length}`}
                </NavLink>
              </div>
              <div className="author__info">
                <div className="author__time">
                  Создано{" "}
                  <span>
                    {` ${new Date(
                      Date.parse(postDate.createdAt)
                    ).toLocaleString()}`}
                  </span>
                </div>
                <div className="author__name">
                  Автор
                  <span>{` ${postDate?.User?.userName}`}</span>
                </div>
              </div>
              <NavLink
                onClick={handleLikes}
                className={`fa fa-thumbs-up ${
                  userIDSession === likeUserID?.user_id
                    ? "thumbs__like__active"
                    : ""
                }`}
              />
              <span className="like__thumbs">{getLike.length}</span>
              <NavLink
                onClick={handleDisLikes}
                className="fa fa-thumbs-down"
              />{" "}
              <span className="dislike__thumbs">{getDisLike.length}</span>
            </div>
            <NavLink to={`/changeposts/${post.id}`} className="put__post">
              <i className="fa fa-pencil" />
            </NavLink>
            <NavLink
              onClick={() => deleteHandler(post.id)}
              className="delete__post"
            >
              <i className="fa fa-times-rectangle" />
            </NavLink>
          </div>
        </div>
      )}
    </>
  );
}

I tried to do this in another component, in Postlist

import React, { useEffect } from "react";
import { useParams } from "react-router-dom";
import Postcard from "../Postcard";

export default function Postlist({
  posts,
  setPosts,
  userIDSession,
  comments,
  setComments,
}) {
  const { id } = useParams();
  useEffect(() => {
    fetch(`/api/posts/countposts/${id}`, { method: "GET" })
      .then((res) => res.json())
      .then((data) => setPosts(data))
      .catch((err) => console.log(err));
  }, []);

  const deleteHandler = async (id) => {
    await fetch(`/api/posts/${id}`, { method: "DELETE" })
      .then(() => setPosts((prev) => prev.filter((data) => data.id !== id)))
      .catch((err) => console.log(err));
  };

  return (
    <>
      {posts?.length
        ? posts?.map((post) => (
            <Postcard
              key={post.id}
              post={post}
              deleteHandler={deleteHandler}
              userIDSession={userIDSession}
              setPosts={setPosts}
              comments={comments}
              setComments={setComments}
            />
          ))
        : "no posts"}
    </>
  );
}

But in Postlis.jsx I accept an array – posts, which I transferred as a prop from App.jsx.