Change Like Button If Signed In User Already Liked A Post

I hope that all is well. I am trying to use a button to like a post/article posted by other users. I have created a const function called "getAPostLikeRecord()," which will return a list of users that like the individual post. However, if the user currently signed in liked the article, I would like to have the like button highlighted in a different color. Otherwise, it'll be the current color that it is. To be less confusing, I would like to know if the signed-in user already like a post and be able to let the signed-in user know that the post was already liked.

import React, { useEffect, useState } from "react";
import './Home.css'
//Components
import Header from '../../Components/Header/Header';
import Footer from '../../Components/Footer/Footer';
//Dependencies
import Axios from 'axios';
import { useNavigate, useLocation, useParams } from 'react-router-dom';
//Function
import VerificationCheck from "../../Functions/VerificationCheck";
const Home = () => {
const navigate = useNavigate();
const location = useLocation();
const userLoggedIn = VerificationCheck.CheckLogin();
const loggedInUser = VerificationCheck.CheckUser();
const [isLoading, setIsLoading] = useState(false);
const [posts, setPost] = useState([]);
const [likes, setLikes] = useState([]);
const [statusMessage, setStatusMessage] = useState(null);
useEffect(() => {
setIsLoading(true);
if (!userLoggedIn) {
navigate('/Login', {
state: {
previousUrl: location.pathname,
}
});
}
else {
getAllPost();
}
setIsLoading(false);
}, [userLoggedIn]);
const getAllPost = () => {
const url = process.env.REACT_APP_Backend_URL + '/post/get-post-record';
Axios.post (url)
.then ((response) => {
const _data = response.data;
for (var i = 0; i < _data.length; i++){
_data[i].displayMore = false;
}
setPost(_data);
})
.catch((error) => {
setStatusMessage("Server Side Error");
});
}
const getAPostLikeRecord = async (PostID) => {
const url = process.env.REACT_APP_Backend_URL + '/post/get-like-record';
await Axios.post (url, {PostsID : PostID})
.then ((response) => {
setLikes(response.data);
})
.catch((error) => {
setStatusMessage("Server Side Error");
});
}    
const handleShowMore = (post_id) => {
const current_state = [...posts];
const current_post = current_state.find(p => p.postsID === post_id);
if(!current_post) {
// couldn't find the post, ID's dont match
return;
}
// replace the current state to the opposite
current_post.displayMore = !current_post.displayMore;
setPost(current_state);
}
const CommentRedirect = (postsID) => {
navigate(`/Post/${postsID}`);
}
return (
<>
<Header/>
<div className='homeBody'>
<div className="homeForm">
{isLoading ?
<>
<h1>Loading...</h1>
</>
:
<>
{statusMessage ? 
<>
<h1>{statusMessage}</h1>
</>
:
<>
{posts.map(uploadedPost => (
<table key={uploadedPost.postsID}>
<tbody className="postData" key={uploadedPost.postsID}>
<tr><td><a href={`/Post/${uploadedPost.postsID}`}><h1 className="title">{uploadedPost.postsTitle}</h1></a></td></tr>
<tr>
<td>
<div className="authorDate">
<h2 className="author">Author: {uploadedPost.postsAuthor}</h2>
<h3 className="datetime">{uploadedPost.createdOn}</h3>
</div>
</td>
</tr>
<tr><td className="btn"><button className="btn" onClick={() => handleShowMore(uploadedPost.postsID)}>{uploadedPost.displayMore ? "Show less" : "Show more"}</button></td></tr>
<tr><td><p className="caption">{uploadedPost.displayMore ? uploadedPost.postsCaption : `${uploadedPost.postsCaption.substring(0, 250)}`}{uploadedPost.displayMore ? "" : "..."}</p></td></tr>
<tr><td><button className="interaction">{uploadedPost.postsLikes} Likes</button> <button className="interaction" onClick={() => CommentRedirect(uploadedPost.postsID)}>{uploadedPost.postsComments} Comment</button> <button className="interaction">Share</button></td></tr>
</tbody>
</table>
))}
</>
}
</>
}
</div>
</div>
<Footer />
</>
);
}
export default Home;

UPDATE:
I have updated the getAPostLikeRecord() function in my code to change the color of the individual-like button for a post if the user has already liked a post. However, .find is returning as undefined for some reason...

    const getAPostLikeRecord = async (PostID) => {
const url = process.env.REACT_APP_Backend_URL + '/post/get-like-record';
await Axios.post (url, {
PostsID : PostID
})
.then ((response) => {
setLikes(response.data);
if (response.data.length !== 0) {
for (var i = 0; i < response.data.length; i++){
response.data[i].didUserLike = false;
}
const current_state = [...likes];
const current_likes = current_state.find(l => l.postsLikeAuthor.trim() === loggedInUser);
console.log(current_likes)
if(!current_likes) {
// couldn't find the post, ID's dont match
return;
}
// replace the current state to the opposite
current_likes.didUserLike = !current_likes.didUserLike;
setLikes(current_state);
}
})
.catch((error) => {
setStatusMessage("Server Side Error");
});
}

I can think of two ways to do this, sadly both require some backend and db changes and the easiest one is to set the likes record as follows:

{
likes: [userId: string]
}

and in your back-end you can return a "liked" boolean by checking if the likes array contains the userId in the request.

The other way is to add a likedPosts table, and then check if the current post is in that likedPosts.

{
likedPosts: [postId: string]
}

Overall, you should give a user a column containing posts they like while also giving a post a column containing users who like it. It’s a bit complicated but yet simple.

> A post has a list of users who like it.
> A user has a list of posts they like.

With the separation of concerns, other users can know how many likes a post has while a user can know which posts they like.

I assumed you can control the implementation on the backend but if you can’t but will only approach it via the frontend, it won’t turn out well.