react-table globalFilter example for NumberRangeColumnFilter

Question

Trying to implement a NumberRangeColumnFilter, outside of the table on a specific column. Basically using globalFilter.

I converted the SelectColumnFilter from example to a global select filter outside of the table like below.

function GlobalSelectFilter({
    preGlobalFilteredRows,
    globalFilter,
    setGlobalFilter,
}) {
    const [value] = React.useState(globalFilter)
    const options = React.useMemo(() => {
        const options = new Set()
        preGlobalFilteredRows.forEach(row => {
            options.add(row.values['priority'])
        })
        return [...options.values()]
    }, ['priority', preGlobalFilteredRows])

    return (
        <span>
            <select
                value={value}
                onChange={e => {
                    setGlobalFilter((e.target.value == 'All' ? undefined : e.target.value) || undefined)
                }}
            >
                <option value="">All</option>
                {options.map((option: any, i) => (
                    <option key={i} value={option}>
                        {option}
                    </option>
                ))}
            </select>
        </span>
    )
}

But when I am trying to use NumberRangeColumnFilter example for a Global NumberRangeColumnFilter, the globalFilter doesnt take an array like filterValue = []

Is my approach entirely wrong? How would one achieve this min max range thing for globalFiltering. An example would really help. Also trying to do this with date range filtering.