While using apollo in react app, an error appeared and I can't resolve it. I'm trying mapping array in Query tag and after some conditions, render the component.

  render() {
    return (
      <div>
        <h1></h1>
        <div>
          <Query query={PRODUCTS}>
            {({ data, loading }) => {
              if (loading) return "...Loading";
              const { categories } = data;
              console.log(categories);
              if (categories.some((category) => category.name === "all")) {
                const itemIndex = categories.findIndex(
                  (category) => category.name === "all"
                );
                categories[itemIndex].products.map((product) => {
                  console.log(categories[itemIndex].products);
                  return <Card data={product} />;
                });
              }
            }}
          </Query>
        </div>
      </div>
    );
  }