How to filter results and update a google map

Last Query from me about this, I have done everything I need to at this point except for one thing, no mater what I try I cant seem to get the search to show items on the list and markers on the map. Ive tried to use filter but can only get the list to narrow down when the input field has something. I cant seem to get the markers and List to change. Here is the code I have so far

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper 
} from 'google-maps-react';

var  AllPlaces = [
{
"name" : "Pizza",
"lat": "40.7589",
"lng":"-73.9851",
},

{
"name" : "Cookies",
"lat": "40.7690",
"lng":"-73.9952",
},
{
"name" : "Bagels",
"lat": "40.7489",
"lng":"-73.9751",
}
]

class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
query:'',
};

markers = []


onMarkerClick = (props, marker, e) => {
this.setState({
  selectedPlace: props,
  activeMarker: marker,
  showingInfoWindow: true
 });
}

onLiClick = (i) =>{
this.setState({
    showingInfoWindow: true,
    activeMarker: this.markers[i],
    selectedPlace: AllPlaces[i]
})
}


onMapClicked = (props) => {
if (this.state.showingInfoWindow) {
  this.setState({
    showingInfoWindow: false,
    activeMarker: null
  })
}
}


CreateInputField = () => (
<input
  placeholder = "Search Nearby Places"
/>
)

findPlaces = () => (
<ol className='Places'>
  {AllPlaces.map((arrayItem, index)=>
    <li
    key = {index}
    className='Place'
    onClick={() => {this.onLiClick(index)}}
    >{arrayItem.name}</li>
  )}
</ol>
);

render() {
return (
  <div className = 'map-container' style= 
{{marginleft:'250px'}}>
    <div>
      <div className = 'sideMenu'>
        <div className = 'List'>
          <h1 className = 'title'> Places to Eat 
</h1>
            {this.CreateInputField()}
        </div>
        <div className = 'PlaceList'>
          {this.findPlaces()}
        </div>
      </div>
    </div>
    <Map google={this.props.google} zoom={14}
      initialCenter = {{lat:40.7589, lng:-73.9851}}
      onClick={this.onMapClicked}>
      {AllPlaces.map((marker, i) =>
          <Marker
          ref={(e) => {if (e) this.markers[i] = 
 e.marker}}
          onClick={this.onMarkerClick}
          title = {marker.name}
          name={marker.name}
          position = 
{{lat:marker.lat,lng:marker.lng}}
          />
      )}
      <InfoWindow
        onOpen={this.windowHasOpened}
        onClose={this.windowHasClosed}
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}>
        <div>
          <h1>{this.state.selectedPlace.name}</h1>
        </div>
      </InfoWindow>
    </Map>
  </div>
 );
 }
}

export default GoogleApiWrapper({
apiKey: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'
})(MapContainer)

I have been stuck on this for about 2 weeks now and just need a little guidance on it.