getFacetedMinMaxValues does not work correctly

[BigSillyTiger]

Hi, I was working with faceted header filter, but why my getFacetedMinMaxValues does not work correctly, I found the returned tuple is not always [min, max], sometimes it's [max, min], and check the img below, the max does not meet the actual data all the time.
Is this because I missed something? or I used it in a wrong way?

const RangeFilter = <T extends object>({ column, values }: Tprops<T>) => {
    const { t } = useTranslation();
    // the column.getFacetedMinMaxValues can not asure the return value is fo the order [min, max]
    // so I get the min and max value from the return value muanlly
    const newPairV = column.getFacetedMinMaxValues()?.flat() ?? [];
    const facetedMin = Math.min(...newPairV.map(Number));
    const facetedMax = Math.max(...newPairV.map(Number));

    return (
        <div>
            <div className="flex flex-col gap-y-2 w-full">
                <div className="flex flex-row justify-center items-center gap-x-1">
                    <span className="text-gray-500">
                        {t("placeholder.min")}
                    </span>
                    <DebouncedInput
                        type="number"
                        min={facetedMin}
                        max={facetedMax}
                        value={(values as [number, number])?.[0] ?? ""}
                        onChange={(value) =>
                            column.setFilterValue((old: [number, number]) => [
                                value,
                                old?.[1],
                            ])
                        }
                        placeholder={`${facetedMin}`}
                        className="w-full"
                    />
                </div>
                <div className="flex flex-row justify-center items-center gap-x-1">
                    <span className="text-gray-500">
                        {t("placeholder.max")}
                    </span>
                    <DebouncedInput
                        type="number"
                        min={facetedMin}
                        max={facetedMax}
                        value={(values as [number, number])?.[1] ?? ""}
                        onChange={(value) =>
                            column.setFilterValue((old: [number, number]) => [
                                old?.[0],
                                value,
                            ])
                        }
                        placeholder={`${facetedMax}`}
                        className="w-full"
                    />
                </div>
            </div>
            <div className="h-1" />
        </div>
    );
};

[devmoatassem]

@BigSillyTiger Facing same issue
Have you figure out any fix?

[BigSillyTiger]

Still not yet

[devmoatassem]

I have made a workaround, I am sure getFacetedMinMaxValues is also doing same but poorly
Sharing the snippet maybe if it's helpful to you

  const allValues = column?.getFacetedUniqueValues() ?? new Map();
  const maxV = Math.max(
    ...Array.from(allValues.keys(), (value) => {
      const num = Number(value);
      return isNaN(num) ? 0 : num;
    })
  );

  const minV = Math.min(
    ...Array.from(allValues.keys(), (value) => {
      const num = Number(value);
      return isNaN(num) ? 0 : num;
    })
  );

You may handle these values with the help of useEffect and useState depending on your use-case

[BigSillyTiger]

Thanks, before getFacetedMinMaxValues getting fixed in the future, the only thing we can do is make a workaround