Javascript – How do I transfer the sorting type between components to sort products in ascending or descending order?

I have three components:

1. Parent (HomePage.jsx)

export default function HomePage() {
  const [currentSorting, setCurrentSorting] = useState();

  return (
    <>
      <IntroSlider />

      <main className="main-content">
        <MainContentHeader setSorting={setCurrentSorting} />

        <ProductSection currentFuncOfSorting={currentSorting} />
      </main>
    </>
  );
}

2. Child(ProductSection.jsx)

export default function ProductSection({ currentFuncOfSorting }) {
  const [limitedProductList, setProductsToShow] = useState([]);
  const [next, setNext] = useState(initialCountProducts);
  const [sortProductList, setSortProductList] = useState(productList);

  useEffect(() => {
    let sorted = [...sortProductList.sort(currentFuncOfSorting)];
    setSortProductList(sorted);
    setProductsToShow(sorted.slice(0, initialCountProducts));
  }, [currentFuncOfSorting]);

  const loopWithSlice = (start, end) => {
    const slicedProduct = sortProductList.slice(start, end);
    setProductsToShow(slicedProduct);
  };

  const handleShowMorePosts = () => {
    loopWithSlice(0, next + productsPerСlick);
    setNext(next + productsPerСlick);
  };

  return (
    <>
      <section className="product-section">
        {limitedProductList.map((item, index) => (
          <ProductCard key={index} {...item} />
        ))}
      </section>
      {limitedProductList.length < productList.length && (
        <div className="product-section__button">
          <button onClick={handleShowMorePosts}>Upload more</button>
        </div>
      )}
    </>
  );
}

3. Child(MainContentHeader.jsx)

...
<select
  onChange={(e) => {
    switch (e.target.value) {
      case "price:asc":
        ()=>setSorting(SortPriceAsc);
        break;
      case "price:desc":
        ()=>setSorting(SortPriceDesc);
        break;
    }
  }}
  className="main-content-header__order"
>
  <option data-filter-value="" value="">
    Order: Default
  </option>
  <option data-filter-value="price:asc" value="price:asc">
    Price: ascending
  </option>
  <option data-filter-value="price:desc" value="price:desc">
    Price: descending
  </option>
</select>
...

SortPriceAsc and SortPriceDesc are sorting functions

I’m trying to pass a state change function to MainContentHeader.jsx. And when you change it, I want the type of product sorting to change in ProductSection.jsx.

However, the code is not working, and in search of a solution, if I understood correctly, this is a bad way to solve the problem.