I have a category page that is supposed to display category info depending on the category route.

My route is:

} />

I can have multiple layers of sub categories so the actual URL could look something like `category/mens` or `category/mens/tshirts` etc

And then my component is:

const CategoryPage = () => {
  const { "*": path } = useParams();

  const [currentPath, setCurrentPath] = useState();
  const [category, setCategory] = useState();
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchCategory = async () => {
      setCurrentPath(path);
      setLoading(true);
      try {
        const response = await axios.get(`/categories/path/${path}`);
        setCategory(response.data.category);
        console.log(path, currentPath)
        setLoading(false);
      } catch (error) {
        setLoading(false);
        toast.error(error.response.data.error || "Failed to fetch categories  ");
      }
    }
    if((!category && !loading) || path!==currentPath){
      console.log(path, currentPath)
      fetchCategory();
    }
  }, [category, loading, path, currentPath]);

  if (loading || category === undefined) {
    return ;
  }

  return (
    

      {category.name}
      //list of subcategories that navigate to the relevant url
      //or list of products if(category.type===productLevel)
    
  );
};
export default CategoryPage;

If I navigate from `category/mens` to `category/mens/tshirts` it will not re-render but going to `category/mens/tshirts` directly shows the correct data

Why is the component not re-rendering the way I want it to. I thought having `path` as a dependency for `useEffect` should work or is it because I am using a wildcard here?