NextJS — карты Google динамически меняют цвет маркеров

В моем следующем приложении JS я загружаю карту через пакет @googlemaps/js-api-loader. У меня есть список мест, которые я хочу нанести на карту, и в то же время их список отключен в левой части моей страницы.

При наведении курсора на одно из мест в списке я хотел бы динамически изменять цвет маркера, представляющего это местоположение (вроде того, как текущий фокус на карте). Как мне это сделать?

вот мой код:

type MarkerObject = {
    id: number
    marker: google.maps.marker.AdvancedMarkerElement
}

export const MapComponent = ({ locations, currentFocusId }: MapProps) => {
    const [markers, setMarkers] = useState<MarkerObject[]>([])

    useEffect(() => {
        const initMap = async () => {
            const loader = new Loader({ apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY! })
            const { Map } = (await loader.importLibrary('maps')) as google.maps.MapsLibrary
            // prettier-ignore
            const { AdvancedMarkerElement, PinElement } = (await loader.importLibrary('marker')) as google.maps.MarkerLibrary

            // create map
            const map = new Map(document.getElementById('map') as HTMLElement, {
                center: locations[0].position,
                zoom: 15,
                mapId: 'map',
            })

            // create markers
            for (const location of locations) {
                const pinBackground = new PinElement({
                    borderColor: 'black',
                    glyphColor: 'black',
                })

                const marker = new AdvancedMarkerElement({
                    map,
                    position: location.position,
                    content: pinBackground.element,
                })
                setMarkers((prev) => [...prev, { id: location.id, marker }])
            }
        }

        initMap()
    }, [])

useEffect(() => {
        if (!markers.length) return

        const focusMarker = markers.find((markerObject: MarkerObject) => markerObject.id === currentFocusId)
        if (!focusMarker) return

        // how can I change / replace the content or color of the marker to set it to blue?
    }, [currentFocusId])

    return <div id = "map" style = {{ width: '100vw', height: '100vh' }}></div>

Я пробовал такие вещи, как

focusMarker.marker.content = new google.maps.marker.PinElement({
            background: 'blue',
            borderColor: 'black',
            glyphColor: 'black',
        })

но пока ничего не помогло