map.setCenter is not function

[mertkesimliileri]

const [map, setMap] = React.useState(null)

useEffect(() => {
  country = hotels.find(h => h.country === choice);
  if(map != null) {
  map.setCenter(hotels.find(h => h.country === choice)?.center);
  map.setZoom(6);
  }
  if (budgetValue == null) {
    filteredFlights = country.hotels
  } else {
    filteredFlights = country?.hotels.filter(f => f.price * personCount < budgetValue);
  }
  setMarkers(filteredFlights);
}, [budgetValue]);
const onLoad = React.useCallback(function callback(map) {

setMap(map)
  }, [])

const onUnmount = React.useCallback(function callback(map) {
  setMap(null)
}, [])

return isLoaded ? (
  <GoogleMap
    mapContainerStyle={containerStyle}
    center={tempCenter}
    zoom={6}
    onLoad={(map) => {
      setMap(map);
    }}
    onUnmount={onUnmount}
  >
    {markers?.map((hotel, i) => {
      return showMarker !== i ?
        <Marker
          onLoad={onLoad}
          position={{ lat: hotel.lat, lng: hotel.lng }}
          onMouseOver={() => setShowMarker(i)}
          key={i}
        /> :
        <InfoWindowF
          onLoad={onLoad}
          position={{ lat: hotel.lat, lng: hotel.lng }}
          key={i}
        >
          <a href={hotel.url} target="_blank">
            <div onMouseOver={() => setShowMarker(i)} onMouseOut={() => setShowMarker(null)} style={divStyle}>
              <h1>{hotel.name}</h1>
              <img style={{ width: "200px", height: "100px" }} src={hotel.img} alt={hotel.name}></img>
              <Typography>
                Gecelik: {hotel.price}TL - {personCount} kişi: {hotel.price * personCount}TL
              </Typography>
            </div>
          </a>
        </InfoWindowF>
    })}
    <></>
  </GoogleMap>
) : <></>
}

Trying to use map.setCenter() in useEffect but I get map.setCenter is not function. Which I trying to achieve changing the center after useEffect runs. When it runs on first time there is no problem but others dont work. Thanks