How to use the @chakra-ui/utils.valueToPercent function in @chakra-ui/utils

const [isFocused, setIsFocused] = React.useState(false);

  const [valueState, setValue] = React.useState(() => {
    if (defaultValue) return defaultValue;
    return isReversed ? max : min;
  });

  const [isControlled, _value] = useControllableValue(valueProp, valueState);

  // Constrain the value because it can't be less than min
  // or greater than max
  const value = constrainValue(_value, min, max);

  const reversedValue = max - value + min;
  const trackValue = isReversed ? reversedValue : value;
  const trackPercent = valueToPercent(trackValue, min, max);

  // A single place to update state for controlled/uncontrolled scenarios
  const updateValue = React.useCallback(
    newValue => {
      if (!isControlled) {
        setValue(newValue);
      }
      if (onChange) {
        onChange(newValue);
      }
    },
    [isControlled, onChange],
  );

  const isVertical = orientation === "vertical";

export function useProgressbar(props: UseProgressBarOptions) {
  const percent = valueToPercent(props.value, props.min, props.max);
  const isIndeterminate = typeof props.value === "undefined";
  return {
    "data-indeterminate": isIndeterminate ? "" : undefined,
    "aria-valuemax": props.max,
    "aria-valuemin": props.min,
    "aria-valuenow": isIndeterminate ? undefined : props.value,
    "aria-valuetext":
      typeof props.getValueText === "function"
        ? props.getValueText(props.value, percent)
        : props.valueText,
    role: "progressbar",
    percent,
  };
}

export function useSliderMarker(props: any) {
  const slider = useSliderContext();

  const isInRange = !(props.value < slider.min || props.value > slider.max);
  const isHighlighted = slider.value >= props.value;
  const markerPercent = valueToPercent(props.value, slider.min, slider.max);

  const markerStyle: React.CSSProperties = {
    position: "absolute",
    ...(slider.isVertical
      ? { bottom: `${markerPercent}%` }
      : { left: `${markerPercent}%` }),
  };

  return { isInRange, markerStyle, isHighlighted };
}