onChange in useEffect - preventing infinity loop - range slider

Question

I have a slider range component where the min and max values change depending on what the user selects. slider component

I have some code in the slider component that is causing an infinite loop to occur.

Please could you provide some info on why this is occurring and how to stop it happening? 'minVal' and 'maxVal' are the values that the user selects whereas 'min' and 'max' are the fixed values at the bottom end and top end of the slider.

 useEffect(() => {
        onChange({ min: minVal, max: maxVal });
    }, [minVal, maxVal, onChange]);

<MultiRangeSlider
                min={min}
                max={max}
                onChange={({ min, max }: { min: number; max: number }) =>
                    onChange(
                        new URL(
                     `final_price_from=${min}&final_price_to=${max}`,
                            "http://absoluteurl.com"
                        ).href
                    )
                }
            />

This is the hook for the onChange method:

const onChange = useCallback(
        (url: string, shouldApply = false) => {
            dispatch(setFiltersFeedUrl(url));
            run(`?feed_url=${encodeURIComponent(url)}`);
            shouldApply && apply(url);
        },
        [dispatch, run]
    );

Thanks in advance!