google-maps-react centers me in the middle of the ocean when given new bounds

I am using the google-maps-react package and I am trying to have bounds for my map. They should change based on values passed to the component through props. It does successfully do this, but after the first load of my website instead of reloading the map so that I can see all the markers, it just puts me at lat: 0.0 and long: 0.0. If I zoom out I can see all of my markers, but the map does not resize itself. It does successful load! Just doesn't load the bounds. See the images below.

After I save my file and it reloads

After I leave the page and come back, or refresh

Here is what I've tried:

import { Map, Marker, GoogleApiWrapper } from "google-maps-react";

class MapExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bounds: null
    };
    this.handleMapLoad = this.handleMapLoad.bind(this);
  }
  
  handleMapLoad() {
    const bounds = new this.props.google.maps.LatLngBounds();
    for (let loc of this.props.originsCoords) bounds.extend({ lat: loc.lat, lng: loc.lng });
    this.setState({bounds:bounds});
  }

  render() {
    return (
      <Map
        onReady={this.handleMapLoad}
        google={this.props.google}
        bounds={this.state.bounds}
        style={{width:'50%', height:'50%'}}
      >
        {this.props.originsCoords.map((loc, i) => (
          <Marker key={i} position={{ lat: loc.lat, lng: loc.lng }} />
        ))}
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "api-key"
})(MapExample);