Javascript – updating Google Map React center using UseState results in NaN's

I have a Map component in my React project, which receives a prop of a current hotel and is supposed to retrieve and present the hotel’s location on a Google Map React Map.

This is the code of my MapView.jsx component so far-

import React, { useState, useEffect } from 'react';
import GoogleMapReact from 'google-map-react';
import MapMarker from "../../../public/svg/MapMarker.svg";

const AnyReactComponent = ({ text }) => (
    <div className='map-marker'>
        <div className='chat-box'>
            <p>{text}</p>
            <div className="chat-arrow"></div>
        </div>
        <img src={MapMarker} alt="Map Marker" />
    </div>
);

export function MapView({ stay }) {
    const [defaultProps, setDefaultProps] = useState({
        center: { lat: 32.5, lng: 34.9 },
        zoom: 15
    });

    const handleApiLoaded = (map, maps) => {
        // use map and maps objects
    };

    useEffect(() => {
        if (stay && stay.loc && stay.loc.lat && stay.loc.lng) {
            setDefaultProps({
                center: { lat: stay.loc.lat, lng: stay.loc.lng },
                zoom: 15
            });
        }
    }, [stay]);

    return (
        <div className="map-container">
            <h2>Where you'll be</h2>
            <p>{stay.loc.address}</p>
            <div style={{ height: '400px', width: '100%' }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: "AIzaSyDMl5nCzylGqvy3ogV2cL1CIxCl7X1b0vQ" }}
                    center={defaultProps.center}
                    defaultZoom={defaultProps.zoom}
                    yesIWantToUseGoogleMapApiInternals
                    onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
                >
                    <AnyReactComponent
                        lat={defaultProps.center.lat}
                        lng={defaultProps.center.lng}
                        text="Exact location provided after booking."
                    />
                </GoogleMapReact>
            </div>

            <a href="#" className="show-more">Show more</a>
        </div>
    );
}

When stay loads I want the location to change to the hotel’s location, but the code results in the map not showing and this error occurs-

Why is this error showing? logging the stay loc before using setDefaultProps clearly shows that they are defined so I don’t get why there is an NaN.

Is there a changeCenter or updateCenter function that I’m missing?
I’ve been stuck on this for days and can’t find an answer in the documentation…

UPDATE:
this is the stay prop data-

The typeOf stay.loc.lat and lng is number