Problem with targeting categories[0].name and image[0].src

[GitCulture]

I am trying to filter the products downloaded from woocommerce REST API in my NEXTJS project.

I added a snippet to Function.php to bypass the limit of 100 products to download:

function maximum_api_filter($query_params) {
  $query_params['per_page']["maximum"]=100000;
  return $query_params;
}

add_filter('rest_product_collection_params', 'maximum_api_filter');

Function that retrieves products from the REST API :

export const getProductsData = async (perPage) => {
    return await api.get(
        `products`,
        {
            per_page: perPage || 6

        },
    );
}; 

I display products with the help of this component:

const Card = ({ item }) => {            
           // destructuring props
  return (
      <div className="container-fluid">
        <div className="row justify-content-center">
          {item.map((Val) => {
            return (
              <div
                className="col-md-4 col-sm-6 card my-3 py-3 border-0"
                key={Val.id}
              >
                <div className="card-title fw-bold text-center fs-4">
                    {Val.name} &nbsp;&nbsp;&nbsp;&nbsp;--&nbsp;&nbsp;

                  </div>
                <div className="card-img-top text-center">
                  <img src={Val.images[0].src } alt={Val.title} className="photo w-75" />
                </div>
                <div className="card-body">

                  <div className="card-text text-center fw-bold fs-4">
                    {Val.price}
                  </div>
                   <p> {Val.categories[0].name} </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
  );
};

I organized the product category buttons and filtering with :

export default function Home({ headerFooter, products, mainCats}) {

const [item, setItem] = useState(products);

const menuItems = [...new Set(mainCats.map((Val) => Val.name))]

//filter products 

const filterItem = (curcat) => {
        const newItem = products.filter((newVal) => {
          return newVal.categories[0].name === curcat;
        });
        setItem(newItem);
};

As long as it tries to "pull" up to 50 products from the API everything works fine...:

const { data: products } = await getProductsData(50);

However, when I try to pull 100 or more I encounter this error :

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'name')

Source
 /pages/index.js (33:32) @ eval

  31 | const filterItem = (curcat) => {
  32 | const newItem = products.filter((newVal) => {
> 33 | return newVal.categories[0].name === curcat;
     | ^
  34 | });
  35 | setItem(newItem);
  36 | };

Call Stack
filterItem
pagesindex.js (32:27)
onClick
srcComponentsButtons.jsx (12:29)
Show collapsed frames

Similarly in every place where I try to target

product.categories[0].name or product.images[0].src

Here is github repository with my project: https://github.com/GitCulture/WP-Reactjs-productsFiltering

What could be the problem ? Please help, I am a beginner.