Issue when the state values is updated with more number of values.

[shivakantshukla55]

import React from "react";
import ReactDOM from "react-dom";
import { Range } from "react-range";

const STEP = 1;
const MIN = 0;
const MAX = 100;

const initialState_1 = []; //Error: Cannot read properties of undefined (reading 'getBoundingClientRect')
const initialState_2 = [50]; //Issue: try sliding second thumb.
const initialState_3 = [50, 60]; //will work perfectly

class App extends React.Component {
  state = {
    values: initialState_# <------------------------Please try Changing the values here with above states.
  };
  componentDidMount() {
    this.setState({ values: [30, 70] });
  }
  render() {
    console.log(this.state.values, "render");
    return (
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          flexWrap: "wrap",
          margin: "2em"
        }}
      >
        <Range
          values={this.state.values}
          step={STEP}
          min={MIN}
          max={MAX}
          onChange={(values) => this.setState({ values })}
          renderTrack={({ props, children }) => (
            <div
              onMouseDown={props.onMouseDown}
              onTouchStart={props.onTouchStart}
              style={{
                ...props.style,
                height: "36px",
                display: "flex",
                width: "100%"
              }}
            >
              <div
                ref={props.ref}
                style={{
                  height: "5px",
                  width: "100%",
                  borderRadius: "4px",
                  background: "red",
                  alignSelf: "center"
                }}
              >
                {children}
              </div>
            </div>
          )}
          renderThumb={({ props, isDragged }) => (
            <div
              {...props}
              style={{
                ...props.style,
                height: "42px",
                width: "42px",
                borderRadius: "4px",
                backgroundColor: "#FFF",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                boxShadow: "0px 2px 6px #AAA"
              }}
            >
              <div
                style={{
                  height: "16px",
                  width: "5px",
                  backgroundColor: isDragged ? "#548BF4" : "#CCC"
                }}
              />
            </div>
          )}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Link to CodeSandbox

If the length of the array of initial state is same as the length of the array of the updated state then it will work like a charm but if both the array has different length then their is issue. I don't know the length of the array initially I have to update it when components mounts. How to make it work perfectly? Thank you for the wonderful package.

[tajo]

the number of values can't be changed dynamically