How to like a post/image using react query ?

[firaki12345-cmd]

So I am using react query to get the first 6 images and then when I scroll down.. the next apear and so on..

Now everything works fine.. and each post has a different image and like button..

But as soon as I click the like button the other 6 images also get liked... Why is that..

I am using UseState to set the button to liked or not liked.

my CODE below

const Infinite_Loading = () => {

  const [liked, Setliked] = useState(() => "")
  
  function likeME() {
    liked!== `${styles.heartClicked}` ? Setliked(`${styles.heartClicked}`) : Setliked("") 
  }
  

  let { data, fetchNextPage, hasNextPage, isFetching, isLoading, isError } = useInfiniteQuery({
    queryKey: ['products'],
    queryFn: async ({ pageParam }) => {
      
      const my_data = await fetch(`http://localhost:3000/api/homepage/${pageParam[0]}`,{ cache: 'no-store' });

      const response = await my_data.json();
      return response;
    },
    retry: 1,
    initialPageParam: [0],
    getNextPageParam: (lastPage) => {
      const lastprod = lastPage.lastprodsid ?? null
        if(lastprod !== null){
          return [lastprod]
        }
      }
  });

  

  
  return (
    <>
      <div className={styles.itemsContainer}>
        {data.pages.map((item) => (
          item.data.map((ok) => (
            <div className={styles.mainItems} key={ok.id}>
              <div className={styles.imgContainer}>
                <img className={styles.mainImage} src={`http://localhost:3000/${ok.image}`} alt={`Product ${ok.id}`} />
              </div>
              <div className={styles.detailsContainer}>
                <div key={ok.id} 
                onClick={likeME} 
                className={styles.heartContainer}>
                  <svg className={`${styles.heart} ${liked}`} viewBox="0 0 32 29.6">
                  <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2
	                  c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
                  </svg> 
                </div>
              </div>
            </div>
          ))
        ))}
        )}
      </div>
    </>
  );
  
  
};

export default Infinite_Loading;

Below are the images when liked and not liked

Not liked: https://i.postimg.cc/HxtJjCwN/1.png

liked: https://i.postimg.cc/BvHP9FX4/2.png

Please,Help Thanks

[firaki12345-cmd]

SOLVED IT WITH THE CODE BELOW

'use client'

import { useState } from 'react';
import styles from '../styles/Home_Page/styles.module.css';

import Link from 'next/link'

const LikeComponent = ({ id, slug, links, image }) => {
  const [liked, setLiked] = useState(() => "");

  const likeMe = () => {
    liked !== `${styles.heartClicked}` ? setLiked(`${styles.heartClicked}`) : setLiked("")
  };


  return (
    <div className={styles.mainItems} key={id}>
      <div className={styles.imgContainer}>
      <Link href={`/similar/${slug}`}>
          <img className={styles.mainImage} src={`http://localhost:3000/${image}`} alt={`Product ${id}`} />
        </Link>
      </div>
      <div className={styles.detailsContainer}>
        <div key={id} onClick={likeMe} className={`${styles.heartContainer}`}>
          <svg className={`${styles.heart} ${liked}`} viewBox="0 0 32 29.6">
            <path d="M23.6,0c-3.4,0-6.3,2.7-7.6,5.6C14.7,2.7,11.8,0,8.4,0C3.8,0,0,3.8,0,8.4c0,9.4,9.5,11.9,16,21.2 c6.1-9.3,16-12.1,16-21.2C32,3.8,28.2,0,23.6,0z"/>
          </svg>
        </div>
      </div>
    </div>
  );
};

export default LikeComponent;