How to keep React state and db in sync with each other

const PostPage: NextPage = ({}) => {
  const router = useRouter();
  const { slug } = router.query;
  const postId = slug as string;
  const { data: session, status } = useSession();
  const [currentLike, setCurrentLike] = useState<boolean | undefined>(
    undefined
  );
  const [currentStar, setCurrentStar] = useState<boolean | undefined>(
    undefined
  );
  const { data: post } = api.post.getPostById.useQuery({
    postId: postId,
  });
  const [likesAmt, setLikesAmt] = useState(post?.likes.length || 0);
  console.log(post?.likes.length, likesAmt);
  const [starsAmt, setStarsAmt] = useState(post?.stars.length ?? 0);
  const { mutate: toggleLike } = api.post.toggleLike.useMutation({
    onMutate: () => {
      if (currentLike) {
        setCurrentLike(undefined);
        setLikesAmt((prev) => {
          // if (prev) {
          if (prev == 1) {
            return 0;
          }
          return prev - 1;
          // }
        });
      } else {
        setCurrentLike(true);
        setLikesAmt((prev) => {
          // if (prev) {
          return prev + 1;
          // }
        });
      }
    },
  });

  useEffect(() => {
    if (post) {
      post.likes.map((like) => {
        if (like.userId === session?.user.id) {
          setCurrentLike(true);
        }
      });
      post.stars.map((star) => {
        if (star.userId === session?.user.id) {
          setCurrentStar(true);
        }
      });
    }
  }, [post, session?.user.id]);