How do I reset an array filter when a new "option" is selected? (React)

I have been trying to make a category filter for my webshop project that I’ve been working on. I’m fairly new to React/JavaScript, so I’m probably missing something very obvious.

 {!loading
            ? webshopData.categories?.map((item) => {
                const filtered = products.filter((obj) =>
                  item.products.$each.includes(obj._id)
                );

                return (
                  <div
                    className="productsCategorySelector"
                    onClick={() => setProducts(filtered)}
                    key={item.name}
                  >
                    <p className="label-form productsCategoryLabel">
                      {item.name}
                    </p>
                  </div>
                );
              })
            : null}

When I press on the filter, my products do get filtered, but I need to use another function to get my products back. They are saved in a "productsUnsorted" hook/state.

{!webshopData.categories && (
            <p style={{ marginBottom: 20 }}>All products</p>
          )}
          <p
            className="productsAllShow"
            onClick={() => setProducts(productsUnsorted)}
          >
            All products
          </p>

How can I always reset my array to the default (all products shown) when clicking on a new filter? Right now it just overwrites the changes I made with the filtering function, which means that if I filter products that are in the same category, they won’t show up until I’ve hit the "reset" (productsUnsorted) switch. Is there some way that I can reset the array to the "default" state before filtering via. another category? How can I avoid "keep mutating my array" after the one filter has been applied?

I’ve been sat here for hours trying to figure this out. I tried a bunch of things, but none worked. I just simply don’t understand the logic behind what I’m trying to achieve.

>Solution :

Based on your code, it appears that you are sorting the data from the ‘products’ array and then setting it back into the ‘products’ state. Please let me know if my understanding is incorrect. If this is the case, it means that your ‘products’ array will always be filtered from the previously filtered products.

To avoid this issue, it would be better to use a ‘productUnsorted’ array, to sort your data each time and then store the sorted data into the ‘products’ array.

const filtered = productsUnsorted.filter(
    (obj) => item.products.$each.includes(obj._id)
);