App.js

<ReactiveMap
  componentId="map"
  dataField="location"
  defaultZoom={15}
  defaultMapStyle="Light Monochrome"
  showMarkerClusters={false}
  pagination
  onPageChange={() => {
    document.getElementById('list').scrollTo(0, 0);
  }}
  className="reactive-map"
  onAllData={(hits, streamHits, loadMore, renderMap, renderPagination) => (
  <div className="reactive-container">
    <div id="list" className="list-container">
      {hits.map(data => (
        <div className="user-container" key={data._id}>
          <div className="user-image">
            <img src={data.member.photo} alt={data.member.member_name} />
          </div>
          <div className="user-profile">
            <h3>{data.member.member_name} is going to {data.event.event_name}</h3>
            <p>{data.venue_name_ngrams}</p>
          </div>
        </div>
      ))}
      {renderPagination()}
    </div>
    <div className="map-container">
      {renderMap()}
    </div>
  </div>
)}
  onData={data => ({
    label: (
      <span>
        {data.member.member_name}
      </span>
    ),
  })}

  react={{
    and: ["search","distance"]
  }}
/>