React.JS - Can't Seem To Filter Products Array (Always Shows Null)

Question

So I'm currently learning React, and am following a tutorial on it. There's a point I've been stuck on for hours, which is trying to implement a 'filtering' system to filter out products that have those attributes in the MongoDB database that is connected.

We have the page for all the products:

import React from 'react'
import styled from 'styled-components'
import Announcement from '../Components/Announcement';
import Footer from '../Components/Footer';
import Navbar from '../Components/Navbar';
import Newsletter from '../Components/Newsletter';
import Products from '../Components/Products';
import { useLocation } from 'react-router-dom';
import { useState } from 'react';

const Container = styled.div`

`;

const Title = styled.h1`
    margin: 20px;
`;

const FilterContainer = styled.div`
    display: flex;
    justify-content: space-between;
`;

const Filter = styled.div`
    margin: 20px;
`;

const FilterText = styled.span`
    font-size: 20px;
    font-weight: 600;
    margin-right: 20px;
`

const Select = styled.select`
    padding: 10px;
    margin-right: 20px;
`;

const Option = styled.option``;


export const ProductList = () => {

  const location = useLocation();
  const category = location.pathname.split('/')[2];

  const [filters, setFilters] = useState({});
  const [sort, setSort] = useState("newest");

  const handleFilters = (e) => {
      const value = e.target.value;
      setFilters({
          ...filters,
          [e.target.name]: value
      });
  };

  return (
    <Container>
        <Navbar />
        <Announcement />
        <Title> {category} </Title>
        <FilterContainer>
            <Filter>
                <FilterText> Filter Products: </FilterText>
                <Select name="color" onChange={handleFilters}>
                    <Option disabled>
                        Color
                    </Option>
                    <Option> white </Option>
                    <Option> black </Option>
                    <Option> red </Option>
                    <Option> blue </Option>
                    <Option> yellow </Option>
                    <Option> green </Option>
                </Select>
                <Select name="size" onChange={handleFilters}>
                    <Option disabled>
                        Size
                    </Option>
                    <Option> XS </Option>
                    <Option> S </Option>
                    <Option> M </Option>
                    <Option> L </Option>
                    <Option> XL </Option>
                </Select>
            </Filter>
            <Filter>
                <FilterText> Sort Products: </FilterText>
                <Select onChange={e=>setSort(e.target.value)}>
                    <Option value="newest"> Newest </Option>
                    <Option value="asc"> Price (asc) </Option>
                    <Option value="desc"> Price (desc) </Option>
                </Select>
            </Filter>
        </FilterContainer>
        <Products category={category} filters={filters} sort={sort} />
        <Newsletter />
        <Footer />
    </Container>
  )
}

and we have the individual product component:

import React from 'react'
import styled from 'styled-components'
import Product from './Product';
import { popularProducts } from '../products.js'
import { useState } from 'react';
import { useEffect } from 'react';
import axios from 'axios';

const Container = styled.div`
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
`;

const Products = ({ category, filters, sort }) => {

  const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);

  useEffect(() => {
    const getProducts = async () => {
      try {
        const res = await axios.get(
          category
            ? `http://localhost:5000/api/products?category=${category}`
            : "http://localhost:5000/api/products"
        );
        setProducts(res.data);
      } catch (err) {}
    };
    getProducts();
  }, [category]);

  useEffect(() => {
    category &&
      setFilteredProducts(
        products.filter((item) =>
          Object.entries(filters).every(([key, value]) =>
            item[key].includes(value)
          )
        )
      );
  }, [products, category, filters]);

  console.log(filteredProducts);
  return (
    <Container>
        {filteredProducts.map(item => (
            <Product item={item} key={item.id} />
        ))}
    </Container>
  )
}

export default Products;

Where it's going wrong, is filteredProducts is always empty and the line where I have setFilteredProducts always throws an error saying Uncaught TypeError: Cannot read properties of undefined (reading 'includes'). Now, I'm not really sure if this is enough info, it's a pretty large project but I've followed the tutorial in this part LINE by LINE so I'm so lost why it doesn't work.

Here is an entry in the Products MongoDB section. I'm really lost on this.

_id
:
6210fb1e76a358ed883ab6f8
title: "Cloud Shoes"
description: "Black, classic shoe"
image:"https://images.ctfassets.net/od02wyo8cgm5/7mUcvgGL2UYQNSIOJKAy9N/0bbd9..." categories:Array
size: Array
colors:Array
price:19.99
inStock:true
createdAt:2022-02-19T14:13:50.802+00:00
updatedAt:2022-02-19T14:13:50.802+00:00
__v:0