How to use fitbounds() to center and display all markers in react

Question

I am a beginner with react and I am trying to use circle() and fitbounds() to get all my markers to display on the screen. Right now only the first marker shows on the screen but when I zoom out I can see the rest. However, I want all the markers to display when I run the app. Help will be great! I tried using /global google/ and then declaring a const bounds which store the google.maps.latLngBounds() but it gave me a reference error saying that google was not defined. I created a const that took window the google but the error remains. Since I don't know much about react I am not sure where I am going wrong.

Also, The code snippet needs an API_KEY in the url to run as I removed my API key.

/*global google*/
//Declaring the imports

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react- 
google-maps";`enter code here`
import { Circle } from "react-google-maps";

//The bounds give me a google not defined error 
//const google = window.google;
//const bounds = new google.maps.LatLngBounds();



const MyMapComponent = withScriptjs(withGoogleMap((props) =>

//Creating the GoogleMap instance tag that takes a default zoom and uses only one center
<GoogleMap
    defaultZoom={13}
    center={{ lat: 35.8592, lng: -78.5921 }}
>
    {}
    {props.isMarkerShown &&
        props.markers.map((marker, index) => {

               //MarkerOptions
                return (
                    <Marker
                        position={marker}
                        title="Click to zoom"
                        label={"" + ((index + 1))}
                        onClick={props.onMarkerClick}
                    />
                )
        })
    }
</GoogleMap>
))


const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
    <li>{number}</li>
)

//The three markers being placed
const storeLocations = [
 { "lat": 35.8592, "lng": -78.5921 },
 { "lat": 35.8964, "lng": -78.5734 },
 { "lat": 35.8794, "lng": -78.5693 }
]

export default class MapComponent extends Component {

state = {
    isMarkerShown: false,
    selectedMarkerNumber: 0
}

componentDidMount() {
    this.setState({ isMarkerShown: true })
}

delayedShowMarker = () => {
    setTimeout(() => {
        this.setState({ isMarkerShown: true })
    }, 3000)
}

animatePin() {

    const min = 1;
    const max = 4;
    const rand = min + Math.floor(Math.random() * (max - min));
    console.log("rand" + rand)

    this.setState({
        selectedMarkerNumber: rand
    })
}

//Render function
render() {
    return (
        <div>
            <MyMapComponent
                isMarkerShown={this.state.isMarkerShown}
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&v=3.exp&libraries=geometry,drawing,places"
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `250px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
                onMarkerClick={this.handleMarkerClick}
                markers={storeLocations}
            />
            <div className="item" color="green" onClick={() => this.animatePin()}>
                <ul>{listItems}</ul>
            </div>
        </div>
        )

    }

}