Updating Range Slider Counts via props doesn't update Slider

I have a slider who's count prop is dictated by a prop passed into the slider's parent component. When I update the number of counts, the range slider doesn't update, despite it's props showing correct values.

I'd expect to see as many handles as there are the value passed to 'count'

import React, { useState, useEffect } from 'react';
import { Range } from 'rc-slider';

const ClassBreakSlider = ({ minMax, originalMinMax, colors, breakPoints, onSliderChange }) => {
  const { originalMin, originalMax } = originalMinMax;
  const { min, max } = minMax;

  const [values, setValues] = useState([min, ...breakPoints, max]);

  const handleStyles = colors.map((color) => {
    return {
      backgroundColor: color,
      border: '1px #cccccc solid',
    };
  });
  const trackStyles = colors.map((color) => {
    return {
      backgroundColor: color,
    };
  });

  const handleChange = (sliderValues) => {
    onSliderChange(sliderValues);
    setValues(sliderValues);
  };

  useEffect(() => {
    setValues([min, ...breakPoints, max]);
  }, [breakPoints]);

  return (
    <Range
      count={breakPoints.length}
      defaultValue={[min, ...breakPoints, max]}
      values={values}
      min={originalMin}
      max={originalMax}
      allowCross={false}
      step={1}
      pushable={true}
      trackStyle={trackStyles}
      handleStyle={handleStyles}
      onChange={handleChange}
    />
  );
};

export default ClassBreakSlider;

Start with the Range component usage in the reported ClassBreakSlider example and trace how its count and values props are handled when breakPoints changes. Reproduce the update with changing breakPoints, then add or adjust coverage so the rendered handles match the new count and confirm the existing range behavior remains intact.