const [pageRefreshed , setpageRefreshed] = useState(1);
I have used the above line to check everytime the page has refreshed and change the state to 0 in between if required . Am I going in the right direction?

    useEffect(() => {
        alert("query params changed");
        console.log(location.search);
        const params = new URLSearchParams(location.search);
        if(location.search){
        const brands = params.get('brand');
        // console.log(brands);
        const colors = params.get('color');
        // console.log(colors);
        const sizes = params.get('size');
        // console.log(sizes);

        if (brands){ alert("brands set"); setFilterBrands(JSON.parse(brands)); setpageRefreshed(0)}
        if (colors) { alert("colors set"); setFilterColors(JSON.parse(colors)); setpageRefreshed(0)}
        if (sizes) {alert(" sizes set"); setFilterColors(JSON.parse(sizes)); setpageRefreshed(0)}

        }
        else{
            fetch_product();
            setpageRefreshed(0)
        }
        
        
    }, []);

    useEffect(() => {
        alert("query params changed");
        console.log(location.search);
        const params = new URLSearchParams(location.search);
        if(location.search){
        const brands = params.get('brand');
        // console.log(brands);
        const colors = params.get('color');
        // console.log(colors);
        const sizes = params.get('size');
        // console.log(sizes);

        if (brands){ alert("brands set"); setFilterBrands(JSON.parse(brands)); setpageRefreshed(0)}
        if (colors) { alert("colors set"); setFilterColors(JSON.parse(colors)); setpageRefreshed(0)}
        if (sizes) {alert(" sizes set"); setFilterColors(JSON.parse(sizes)); setpageRefreshed(0)}

        }
        else{
            fetch_product();
            setpageRefreshed(0)
        }
        
        
    }, []);