Reactivesearch & Reactivemaps search routing

Question

Recently I started using Reactivesearch and Reactivemaps by Appbase.io on my website to search my database of items and render them and so on. Most of the components work as they should and some have minor bugs. So recently I moved my component into its own component and then placed that on my nav bar for global access. The issue I then encountered was "how can I route back to my /explore page with my search value?". Evidently its not as simple as I thought.

I setup my search page with a function toPath that takes the path and the value that comes from onValueSelected

  toPath(path, obj) {
    this.props.history.push(`${path}?q="${obj.term}"`);
    console.log('SearchVal: ',obj)
  }

Note that term is added because its the object.term and term is the string from your search.

So I try this and I have URLParams={true} on my <ReactiveGoogleMap/> and <CategorySearch/> set and I select my value, and it takes me to the /explore page but my map is centered on item 0 of the elastic database.

I tried a few other methods, passing just the object, removing URLParams and so on. Nothing seems to work.

If anyone has any idea how this could be achieved I would greatly appreciate it, its just this minor issue but still a problem down the road and the documentation lacks how to do this / any examples for the public.

Here is the current config:

toPath(path, obj) {
   this.props.history.push(`${path}?q="${obj.term}"`);
   console.log('SearchVal: ',obj)
}

<CategorySearch
    className="searchbar"
    dataField={["restaurantName"]}
    categoryField="city.keyword"
    placeholder='Let's Search"'
    componentId="q"
    URLParams={true}
    ...

<ReactiveGoogleMap
   componentId="map"
   dataField="location"
   stream={true}
   defaultZoom={13}
   pagination
   autoCenter={false}
   onPageChange={() => {
     window.scrollTo(0, 0);
   }}
   style={{

   }}
   onPopoverClick={this.onPopoverClick}
   className="rightCol"
   showMarkerClusters={false}
   showSearchAsMove={false}
   searchAsMove={true}
   //this.props.location.state.reactive_s
   //The old way I passed the object I used this ^
   react={{
    and: [
     "q"
    ],
   }}

Also as a side note, i'm not sure if anyone else is getting this but I get these constant issues from @emotion and its a problem with Reactivesearch

serialize.browser.cjs.js:149 Functions that are interpolated in css calls will be stringified.
If you want to have a css call based on props, create a function that returns a css call like this
let dynamicStyle = (props) => css`color: ${props.color}`
It can be called directly with props or interpolated in a styled call like this
let SomeComponent = styled('div')`${dynamicStyle}`

This is also an issue with reactivesearch and makes it very difficult to work because you can't exactly hide it without hiding everything else. It happens with every click and scroll of the page that has a reactive component. Only on dev branches, never on compiled builds.