Make Like button in react.js

I wan't to make the only selected button change not all in the same time when i clicke on it

I've created this function which contains a Boolean state and the toggle it

 const [like, setLike] = useState(false);
const handleLike=()=>{
setLike(!like)
console.log(like);
}

and called it here iside the map

 return (
<Grid container spacing={1} px="4%" width='100%' >
{CardData.map((e, idx) => (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: 0,
border: "1px solid #e0e0e07a",
position: "relative",
borderRadius: "1.5rem",
width: "94%",
boxShadow: "5px 5px 46px -46px #000000",
}}
mb={5}
key={idx}
>
<Box width='100%' >
<Box position="absolute" top=".4rem" right=".8rem">
<IconButton
aria-label="fingerprint"
color="default"
sx={{
zIndex: "4",
bgcolor: "#4b4d4eb2",
width: "2rem",
padding: "4px",
}}
onClick={(e)=>handleLike(e)}
>
{like?<FavoriteIcon sx={{ width: ".8em", color: "#fff" }} />: <FavoriteBorderIcon sx={{ width: ".8em", color: "#fff" }} />}
</IconButton>
</Box>
</Box>
</Box>
</Grid>

First, make your like state into an array of likes:

 const [likes, setLikes] = useState([]);
 
  const handleLike=(idx)=>{
    const newLikes = [...likes];
    newLikes[idx] = !newLikes[idx];
    setLikes(newLikes);
  }

Then, make sure to operate on the correct item in the array:

 return (
    <Grid container spacing={1} px="4%" width='100%' >
      {CardData.map((e, idx) => (
          <Box
            sx={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              padding: 0,
              border: "1px solid #e0e0e07a",
              position: "relative",
              borderRadius: "1.5rem",
              width: "94%",
              boxShadow: "5px 5px 46px -46px #000000",
            }}
            mb={5}
            key={idx}
          >
            <Box width='100%' >
              
              <Box position="absolute" top=".4rem" right=".8rem">
                <IconButton
                  aria-label="fingerprint"
                  color="default"
                  sx={{
                    zIndex: "4",
                    bgcolor: "#4b4d4eb2",
                    width: "2rem",
                    padding: "4px",
                  }}
                  onClick={(e) => handleLike(idx)}
                >
                {likes[idx] ? <FavoriteIcon sx={{ width: ".8em", color: "#fff" }} />: <FavoriteBorderIcon sx={{ width: ".8em", color: "#fff" }} />}
                  
                  
                </IconButton>
              </Box>
              </Box>
            </Box>
</Grid>

Importantly, this will only work if elements are in consistent positions in the array. If they could get moved around, then use some other unique key to identify the correct item to like.

You should create a like useState for each Box. You can do something like this:

const Child = (props) => {
    const [like, setLike] = useState(false);
     
    const handleLike= () => {
       setLike(!like)
       console.log(like);
     };

    return (
        /* What renders inside the Box */
    )
};

const Parent = () => {
    return (
        {CardData.map((e, idx) => (
            <Child key={idx} props={props}>
        )}
    )
}