How to configure initial range values with React?

I am trying to add a new feature to our application that sets an initial range for a price but am not having any luck getting it to work. Unfortunately I cannot provide a full example but I can provide code snippets. The application looks similar to this:

However my goal is to pre-populate the start and end price ranges. Our code looks roughly like this:

<InstantSearch indexName="products-index" searchClient={client}>
    filters="price:5 TO 10"
  <MyCustomRangeInput attribute="price" />

My issue with the code above is the initial results are properly being filtered, but MyCustomRangeInput is not getting set with the initial values of 5 and 10. I’ve printed out the output of useRange and the start values match the min/max of the range value. So my initial filter is not getting properly passed through useRange.

The code of MyCustomRangeInput looks nearly identical to useRange() | React InstantSearch | Algolia with the exception being I have two separate <input /> elements rather than using the sliders.

I’ll also point out if I change filters to numericFilters in the <Configure /> element then I get the following error: [Numeric filters] Can’t switch from the advanced to the managed API

Any pointers or suggestions would be greatly appreciated as this has been driving me crazy.