Handling checkbox filters in a NextJS app with Groq queries and React state

*[_type == "fruit"]{

*[_type == "fruit"]{
  name,
  image
}

*[_type == "fruit"]{
  name,
  image,
  hide
}

return fruits.map(fruit => fruit.hide !== true ? fruit : null)

state = {
    products: productsList,
    categories: {
      first: false,
      second: false,
      third: false,
      forth: false,
    }
  };

const ProductList = (props) => {
  const { products } = props;

  const renderProducts = products?.map(({ _id, title, category }) => {
    return (
      <li key={_id}>
        <Product title={title} category={category} />
      </li>
    );
  });

  return <ul>{renderProducts}</ul>;
};

export default ProductList;

Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using <ul>. See <https://reactjs.org/link/warning-keys> for more information.
    at li
    at ProductList (webpack-internal:///./components/ProductList.js:14:13)