reactjs - How to use filters with uiState and react InstantSearch (Algolia)? - Stack Overflow

I'm trying to use a filter for Algolia's InstantSearch in a react (next.js) application.

The app uses the onStateChange and therefore I need to update the UI state (with setUiState).

I found the docs on how to use it for e.g. ranges

const uiState = {
  INDEX_NAME: {
    query: 'Hill Valley',
    refinementList: {
      colors: ['white', 'black']
    },
    configure: {
      distinct: true,
    },
    menu: {
      category: 'Decoration'
    },
    hierarchicalMenu: {
      categories: ['Decoration > Clocks']
    },
    numericMenu: {
      price: '100:500'
    },
    ratingMenu: {
      rating: 4
    },
    range: {
      ageInYears: '2:10'
    },
    toggle: {
      freeShipping: true
    },
    geoSearch: {
      boundingBox: '47.3165,4.9665,47.3424,5.0201'
    },
    sortBy: 'most_popular_index',
    page: 2,
    hitsPerPage: 20
  },
};

And also the vanilla JS API docs for filters

const filters = 'available = 1 AND (category:Book OR NOT category:Ebook) AND _tags:published AND publication_date:1441745506 TO 1441755506 AND inStock > 0 AND author:"John Doe"';

But I cannot figure out how to use a complex filter in react with uiState.