TypeError: Object(...) is not a function when using useThumbOverlap hook

[bymoe]

I'm getting a weird issue; using the useThumbOverlap always through TypeError: Object(...) is not a function error!

No idea what I'm doing wrong. Deleting the useThumbOverlap fixes it so I'm sure it's the issue. This is the entire code,

import { useState, useRef } from "react";
import { Range, getTrackBackground, useThumbOverlap } from "react-range";

function ThumbLabel({ rangeRef, values, index }) {
  const [labelValue, style] = useThumbOverlap(rangeRef, values, index);
  return (
    <div
      data-label={index}
      style={{
        display: "block",
        position: "absolute",
        top: "-28px",
        color: "#fff",
        fontWeight: "bold",
        fontSize: "14px",
        padding: "4px",
        borderRadius: "4px",
        backgroundColor: "#548BF4",
        whiteSpace: "nowrap",
        ...style,
      }}>
      {labelValue}
    </div>
  );
}

export default function RangeSlider({ step = 100, min = 0, max = 3000 }) {
  const [values, setValues] = useState([500, 2000]);
  const rangeRef = useRef(null);
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        flexWrap: "wrap",
      }}>
      <Range
        values={values}
        step={step}
        min={min}
        max={max}
        rtl={true}
        onChange={(values) => {
          setValues(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: getTrackBackground({
                  values,
                  colors: ["#ccc", "#548BF4", "#ccc"],
                  min: min,
                  max: max,
                  rtl: true,
                }),
                alignSelf: "center",
              }}>
              {children}
            </div>
          </div>
        )}
        renderThumb={({ props, index, 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",
            }}>
            <ThumbLabel
              rangeRef={rangeRef.current}
              values={values}
              index={index}
            />
            <div
              style={{
                height: "16px",
                width: "5px",
                backgroundColor: isDragged ? "#548BF4" : "#CCC",
              }}
            />
          </div>
        )}
      />
    </div>
  );
}

"react-range": "^1.8.7" "react": "^17.0.1"

[tajo]

Can you create a codesandbox?