Check if a user is already following, then change button text to unfollow

I have finally made it so that users can follow and unfollow each other in react, now the only obstacle I am left with is changing the button accordingly. This is the basic structure of my API:

{
    "id":4,
    "user": {
        "id": 4,
        "username": "sammy"
    },
    "full_name": "Sam Iyke",
    "bio": "Software Enginner",
    "image": "http://127.0.0.1:8000/media/user_images/ins-gallery_5.jpg",
  
    "followers": [
        {
            "id": 1,
            "username": "destiny",
            "email": "desphixs@gmail.com"
        },
        {
          "id": 5,
          "username": "jenny",
          "email": "jenny@gmail.com"
        }
    ],
    "date": "2023-02-16T00:41:46.147589Z"
}

I have a followers field there, that have an array of users that are following me, how do i check if the logged in user is in the array, then change thier button to Unfollow, else the button would be Follow.

I am getting the logged in user_id from localstorage jwt

const token = localStorage.getItem('authTokens');
const decoded = jwtDecode(token);
const user_id = decoded.user_id;

These are the button

<div onClick={follow} className="follow-btn color2-bg">
  Follow <i className="fas fa-user-plus" />
</div>
<div onClick={unfollow} className="follow-btn color2-bg bg-danger">
  Unfollow <i className="fas fa-user-minus text-white" />
</div>

This is how my useState looks like

const [ profile, setProfile ] = useState({
    user: '',
    full_name:"",
    ...
    followers:"",
});

So if I want to get the full_name of the user that we are viewing their profile, I do profile.full_name

I would provide any more information or detail needed.

Edit

This is how i add the values to the localstorage

 // this saves the user followers to the localstorage
const response = await api.get(baseUrl + '/service-provider/' + profile_ID + '/')
localStorage.setItem("followers", JSON.stringify(response.data.followers))

function followToggle (){
 if(isFollowing){
    //remove follower
    const followers = JSON.parse(localStorage.getItem("followers"))
    let remaining = followers.filter(user=>user.id!==user_id);
    localStorage.setItem("remaining" ,JSON.stringify(remaining))
    setIsFollowing(false)
}
else{
    //add follower
    const followers = JSON.parse(localStorage.getItem("followers"))
    followers.push(user_id);
    localStorage.setItem("followers" ,JSON.stringify(followers))
    setIsFollowing(true)
 }
}

How to make the Text (Follow or Unfollow) retained after page refreshes?

first of all you can create another state to know the user is following him or not, or can do it manually

let userIndex= profile.followers.findIndex(i=>i.id===currentUserId)
const [isFollowing,setIsFollowing]=useState(userIndex > -1);

then in your code

{!isFollowing ? <div onClick={followToggle} className="follow-btn color2-bg">
  Follow <i className="fas fa-user-plus" />
</div>
:<div onClick={followToggle} className="follow-btn color2-bg bg-danger">
  Unfollow <i className="fas fa-user-minus text-white" />
</div>
}

then your function wil be like this

function followToggle (){
 if(isFollowing){
//remove follower
let followers = //from local storage it should be an array 
let remaining = followers.filter(user=>user.id!==currentUserId);
//set remaining to local storage
}
else{
//add follower
let followers = //from local storage it should be an array 
 followers.push(currentUser);
//set followers to local storage
}
}