Unable to update state in React while creating Like Button

I am new in learning React. I am encountering a small problem and have grinded my brain over the issue, but not been able to come up with the solution.
I am making Comment’s like/dislike component. I am unable to maintain the state on initial run. It gets undefined on initial run, but state gets updated after pressing like button for second time. Following is my JSX:

<div className="flex justify-between gap-5" onL>
   <h4 className="text-text font-medium text-base">
       {comment?.userID?.name}
   </h4>
   <Button
     className="flex-shrink-0 flex-grow-0"
     onClick={() => {
       setHasLiked((prevHasLiked) => {
           return {
             ...prevHasLiked,
             [comment?.userID?._id]:
             !prevHasLiked[comment?.userID?._id],
             };
           });

           onSubmmitLikeComment(
             comment?._id,
             comment?.userID?._id
            );
           }}
           >
           {hasLiked[comment?.userID._id] ? (
             <Empheart stroke="red" fill="red" />
                ) : (
                  <Empheart stroke="black" fill="black" />
                    )}

                    {comment?.like_count}
           </Button>
         </div>

Following is my onSubmmitLikeComment:

const onSubmmitLikeComment = async (commentID, userID) => {
    console.log("userID", userID); //getiing userID correctly
    const userHasLiked = hasLiked[userID]; //getting undefined in initial click render. But this state gets updated after clicking like button like button for second time
    console.log("userHasLiked", userHasLiked);
    console.log("hasLiked", hasLiked);
    try {
      const response = await fetch("/api/likeComment", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-App-Type": "WEB_APP",
        },
        body: JSON.stringify({ commentID, userID, hasLiked: userHasLiked }),
      });
      const result = await response.json();
      console.log("result", result);
      if (result.isSuccess) {
        setComments((prevComments) =>
          prevComments.map((comment) =>
            comment?._id == commentID && comment?.userID?._id === userID
              ? {
                  ...comment,
                  like_count: userHasLiked
                    ? comment.like_count - 1
                    : comment.like_count + 1,
                }
              : comment
          )
        );
        setHasLiked((prev) => ({
          ...prev,
          [userID]: !userHasLiked,
        }));
      }
    } catch (error) {
      console.error("Unable to update like/unlike comment ", error);
      alert(
        "An error occurred while liking/disliking comment. Please try again."
      );
    }
  };

These are two states being used:
const [comments, setComments] = useState([]);
const [hasLiked, setHasLiked] = useState({});

Your help will make my day. 🙂