Filters seem to be clashing

Questions and Answers Strapi Backend
1

[details=“System Information”]

  • Strapi Version: 4
  • Operating System: Windows
  • Database: SQLite
  • Node Version: v18.14.2
  • NPM Version: 9.5.0
import React from "react";
import "./List.scss";
import Card from "../Card/Card";
import useFetch from "../../hooks/useFetch";

const List = ({ subCats, maxPrice, sort, catId }) => {
  const { data, loading, error } = useFetch(
    `/products?populate=*&[filters][categories][id]=${catId}${subCats.map(
      (item) => `&[filters][sub_categories][id][$eq]=${item}`
    )}👉&[filters][price][$lte]=${maxPrice}&sort=price:${sort}` 👈
  );

console.log(data);

  return (
    <div className="list">
      {loading
        ? "loading"
        : data?.map((item) => <Card item={item} key={item.id} />)}
    </div>
  );
};

The code inside the pointers prevents the from appearing in my Products page and when I comment it out the List appears but the radio buttons (ASC & DESC) and range (0 to maxPrice) stop working. What could be the problem?