Default marker as function component

Question

Using this Google Map lib, from this link, I can create a default marker on the map. However, this onGoogleApiLoaded() will only be fired once. I wanted to always center marker on the map. But default marker will required a position at the minimum, so I am trying create the default marker as function and pass new position into it but I couldn't make it work.

I have a main component which will render the the MapContainer component.

Main.js:

const { defaultCenter, defaultZoom, div_Height, div_Width, newCenter } = this.state;

return(
        <div style={{width: 500, height: 100}}>
            <div>          
                <MapContainer
                defaultCenter={defaultCenter}
                defaultZoom={defaultZoom}
                onChange={this.onChange}
                onClick={this.onClick}
                div_Height={div_Height}
                div_Width={div_Width}
                newCenter={newCenter}>

                </MapContainer>
            </div>
        </div>

    );

and a onChange function to get new center coords.

onChange(center){
    let {newCenter} = this.state;
    newCenter = center.center;
    this.setState({newCenter})
}

In my MapContainer which to render the GoogleMap:

MapContainer:

const { defaultCenter, defaultZoom, onChange, onClick} = this.props;
let {newCenter} = this.props
const {apiReady, map, maps} = this.state;

return (
  // Important! Always set the container height explicitly
  <div style={{height: '100vh', width: '100%' }}>
    <GoogleMapReact
      /*bootstrapURLKeys={{ key: 'key' }}*/
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
      yesIWantToUseGoogleMapApiInternals={true}
      onGoogleApiLoaded={({map, maps}) => this.apiLoaded(map, maps)} 
      onClick={onClick}
      onChange={onChange}
    >
    {apiReady ? <Marker map={map} maps={maps} newCenter={newCenter}/>: null}
    </GoogleMapReact>
  </div>
);

onGoogleApiLoaded func to set the map, maps:

apiLoaded(map, maps) {
if (map && maps) {
 this.setState({
   apiReady: true,
   map: map,
   maps: maps
 });
 }}

And lastly the way I create the marker:

const Marker = (props) => {
  return (new props.maps.Marker({
    position: props.newCenter,
    map: props.map
  }));   
}

The error I get is: Invariant Violation: Objects are not valid as a React child (found: object with keys {__gm, gm_accessors_, position, gm_bindings_, map, closure_uid_621320123, clickable, visible}). If you meant to render a collection of children, use an array instead.

Any idea?