React.js - 2 x ant design sliders retrieve data for both values rather than individual

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>