google-map-react marker position doesnt change with map

Question

Google-map-react on changing map size (zoom-in, zoom-out) and changing map position doesn't make any change on my custom marker position and size. it still remain same.

If you have any insights or suggestions regarding this issue, I would greatly appreciate your assistance.

Please saw the video (15s)

import GoogleMapReact from 'google-map-react'
import { useState, useEffect } from 'react'
import { toast } from 'react-toastify'

const PlaceMarker = (props) => (
  <div className='w-20 h-auto shadow-md rounded-xl bg-red-100 px-3 py-3 hover:scale-105'>
    <img src={props.icon} className='w-3 h-3 mb-2' alt='' />
    <p className='text-md'>{props.name}</p>
  </div>
)
export default function SimpleMap({ searchResult, setSearchResult }) {
  const [userLocation, setUserLocation] = useState({ lat: null, lng: null })
  const defaultProps = {
    center: { ...userLocation },
    zoom: 14,
  }

  const handleApiLoaded = (map, maps) => {
    const service = new maps.places.PlacesService(map)
    const request = {
      location: new maps.LatLng(
        defaultProps.center.lat,
        defaultProps.center.lng
      ),
      radius: 5000, // Adjust the radius as per your requirement
      types: ['gym', 'yoga_studio'], // Use the 'types' parameter instead of 'type'
    }

    service.nearbySearch(request, (results, status) => {
      console.log('hi')
      if (status === maps.places.PlacesServiceStatus.OK) {
        // Filter the results to include only gym and yoga studio types
        const filteredResults = results.filter(
          (result) =>
            result.types.includes('gym') || result.types.includes('yoga_studio')
        )

        console.log(filteredResults)
        setSearchResult({ ...searchResult, data: filteredResults })
      }
    })
  }

  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <GoogleMapReact
        key={searchResult.data.length}
        bootstrapURLKeys={{
          key: import.meta.env.VITE_MAP_API_KEY,
          libraries: ['places'],
        }}
        defaultCenter={defaultProps.center}
        defaultZoom={defaultProps.zoom}
        yesIWantToUseGoogleMapApiInternals
        onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
      >
        {searchResult?.data.map(({ geometry, ...otherProps }, id) => {
          const placeLat = geometry.location.lat()
          const placeLng = geometry.location.lng()
          return (
            <PlaceMarker
              key={id}
              lat={placeLat}
              lng={placeLng}
              {...otherProps}
            />
          )
        })}
      </GoogleMapReact>
    </div>
  )
}