The two sliders when activated in the browser work together rather than individual. Console log shows both requests, no matter which slider I'm using. Backend works fine and if I comment one slider out, the remaining slider works fine. Can anyone see where I am going wrong please?

// const

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

// load items for slider 1

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

// slider 1

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

};

// load items for slider 2

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

// slider 2

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

};

// html for slider 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 for slider 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>