Фильтр реагирует на страницу продукта

Question

У меня проблема с фильтрацией страницы продукта для одного из моих веб-сайтов. Мне удалось отлично отфильтровать страницу перед тем, как сделать ajax вызов с реальной базой данных.

У меня есть обе страницы (одна работает, а другая не работает) здесь:

Пожалуйста, загляните на страницу "Продукты. js"

Рабочая страница: https://codesandbox.io/s/cranky-meadow-35z94

Не рабочая страница: https://codesandbox.io/s/pensive-browser-vylk2

Это моя функция отправки формы:

  handleFormSubmit = event => {
    event.preventDefault();

    const selectedSizes = [...this.selectedCheckboxes];

    let shallowCopy = [...this.state.products];

    this.setState({
      filteredProducts: shallowCopy
        .filter(product =>
          selectedSizes.every(size =>
            product.stock.some(s => s.stock > 0 && s.size === size)
          )
        )
        .filter(prod => {
          return prod.gender.some(item => {
            return item[this.selectedGender] === false ? null : prod;
          });
        })
        .filter(brands => {
          return brands.brand.includes(this.state.activeBrand);
        })
    });
  };

Просто для контекста я создал бэкэнд, в котором я делаю следующий ajax вызов:

 componentDidMount () {
        axios
            .get('http://localhost:4000/api/v1/products')
            .then((res) => {
                let products = res.data.data.data;
                this.setState({
                    products,
                    filteredProducts: products,
                    isLoading: false
                })
            })
            .catch(function (error) {
                console.log(error);
        })
    }

Я полагаю, что у меня может быть проблема с методом жизненного цикла, который я использую для монтирования компонента.

До вызова ajax я использовал следующее для рендеринга данных:

const Data = [
  {
    title: "Scotts",
    alternative_title: "Jeremy Scotts Pandabear",
    routeName: "Scotts",
    gender: [
      {
        male: true,
        female: false
      }
    ],
    brand: "Adidas",
    price: 40,
    stock: [
      { size: 3, stock: 0 },
      { size: 3.5, stock: 10 },
      { size: 4, stock: 0 },
      { size: 4.5, stock: 330 },
      { size: 5, stock: 5 },
      { size: 5.5, stock: 555 },
      { size: 6, stock: 6 },
      { size: 6.5, stock: 63 },
      { size: 7, stock: 0 },
      { size: 7.5, stock: 100 },
      { size: 8, stock: 33 },
      { size: 8.5, stock: 333 },
      { size: 9, stock: 222 },
      { size: 9.5, stock: 99 },
      { size: 10, stock: 99 },
      { size: 10.5, stock: 77 },
      { size: 11, stock: 55 }
    ],
    description:
      "The Womens Air Jordan 1 Satin Black Toe” is a special construction of the original colorway of the Jordan 1 with satin paneling on the heel. Following the same blueprint of the Satin Shattered Backboard” colorway that was also a women’s exclusive, this Satin Black Toe” edition features a black and white leather upper with red satin at the heel. The Air Jordan wings” logo on the ankle is presented in a metal medallion to complete the premium look. The Women’s Air Jordan 1 Satin Black Toe” released on August 17, 2019 in limited quantities.",
    image:
      "https://www.nike.com/w/mens-air-max-270-react-shoes-5ix6dz7cmroznik1zy7ok"
  },

Если есть еще какая-то информация, которую я могу здесь разместить, которая может оказаться полезной, пожалуйста, дайте мне знать.