Can't dynamically add bounds

Maybe it's a bug in a library or something because the problem is fairly simple. I just need min and max values added dynamically. Here is the minimum working example of the implementation:

const CarSlider = () => {
  const [defaultValues, setDefaultValues] = useState([800, 1000]);

  const onChange = defaultValues => {
    setDefaultValues(defaultValues);
  };

  return (
    <div className='range-alignment'>
      <div className='range-text'>
        <p>Preisklasse</p>
        <p className='range-price'>
          {defaultValues[0]}€ - {defaultValues[1]}€
        </p>
      </div>
      <div className='range-btn-align'>
        <div className='range-width'>
          <Range
            defaultValue={[defaultValues[0], defaultValues[1]]}
            value={[defaultValues[0], defaultValues[1]]}
            allowCross={false}
            range
            tipFormatter={value => `${value}`}
            tipProps={{ visible: true }}
            min={defaultValues[0]}
            max={defaultValues[1]}
            onChange={onChange}
          />
        </div>
        <button className='range-button'>Filter</button>
      </div>
    </div>
  );
};

export default CarSlider;

In the code above values change but the two tooltips dont move with the cursor. When hardcoding the values min={800} and max={1000} everything works as it should. I double-checked the typeof both defaultValues and they are numbers which is appropriate data type for min and max. I need these values to not be hard-coded.

Start by running the provided CarSlider reproduction and inspect the Range behavior when its controlled value and min/max bounds change together. Trace the relevant range and tooltip handling, then verify the expected handle and tooltip movement with dynamic bounds. Done means the reproduction behaves like the hard-coded-bound case, with a regression test or documented verification for the dynamic case.