I'm trying to compare the currently clicked one with hasClip in a given react map and empty the color if result is identical with the id and category whereas fill the color if it's not the same.

Can someone please help me in figuring out how I can resolve this?

Below I have an array where I map out the category key type and item id:

const data = [
  {
    keyType: "category",
    filtered: [
      { _id: 1, name: "Stocks", paramValue: "stocks" },
      { _id: 19, name: "Commodities", paramValue: "commodities" },
    ],
  },
  {
    keyType: "topics",
    filtered: [
      { _id: 8, name: "Preferred stocks", paramValue: "preferred-stocks" },
      { _id: 24, name: "Stocks", paramValue: "stocks" },
    ],
  },
];

const hasClip = [
  { _id: 1, keyType: "category", name: "Stocks", paramValue: "stocks" },
  {
    _id: 8,
    keyType: "topics",
    name: "Preferred stocks",
    paramValue: "preferred-stocks",
  },
];

const handleFill = (hasClip, category, id) => {
  checkKeyword(hasClip, category, id);
};

const checkKeyword = (hasClip, category, id) => {
  const result = hasClip.some(
    (item) => item._id === id && item.keyType === category
  );
  return result;
};

const par = () => {
  return (
    <>
      {data.map((category) => (
        <>
          <h1 key={category.keyType}>{category.keyType}</h1>
          {category.filtered.map((item) => (
            <styledComp
              key={item._id}
              onClick={() => {
                handleFill(hasClip, category.keyType, item._id);
              }}
              $clip={checkKeyword(hasClip, category.keyType, item._id)}
            >
              {item.name}
            </styledComp>
          ))}
        </>
      ))}
    </>
  );
};

export default par;

const styledComp = styled.div`
  width: 50px;
  height: 50px;
  background-color: ${({ $clip }) => ($clip ? "red" : "none")};
`;