Los dos controles deslizantes cuando se activan en el navegador funcionan juntos en lugar de individualmente. El registro de la consola muestra ambas solicitudes, sin importar qué control deslizante esté usando. El backend funciona bien y si comento un control deslizante, el control deslizante restante funciona bien. ¿Alguien puede ver dónde me estoy equivocando, por favor?

// constante

 const [load, setLoad] = useState([0, 16]); const [freq, setFreq] = useState([0, 28]);

// cargar elementos para el control deslizante 1

 useEffect(() => { console.log("ok to request load"); fetchProducts({ load }); }, [ok]);

// deslizador 1

 const handleSliderLoad = (valueLoad) => { setLoad(valueLoad); setTimeout(() => { setOk(!ok); }, 300);

};

// cargar elementos para el control deslizante 2

 useEffect(() => { console.log("ok to request freq"); fetchProducts({ freq }); }, [ok]);

// deslizador 2

 const handleSliderFreq = (valueFreq) => { setFreq(valueFreq); setTimeout(() => { setOk(!ok); }, 300);

};

// html para el control deslizante 1

 <SubMenu key="2" title={ <span> <p className="pt-4"> Load Bearing MN/m<sup>2</sup> </p> </span> } > <div> <Slider className="ml-4 mr-4" tipFormatter={(v) => v} range value={load} onChange={handleSliderLoad} max="16" // range defaultValue={[0, 16]} /> </div> </SubMenu>

// html para el control deslizante 2

 <SubMenu key="3" title={ <span> <p className="pt-4"> Natural Frequency Hz </p> </span> } > <div> <Slider className="ml-4 mr-4" tipFormatter={(v) => v} range value={freq} onChange={handleSliderFreq} max="28" // range defaultValue={[0, 16]} /> </div> </SubMenu>