I have this vue component

<template>
  <div>
    <div ref="mapContainer" style="width: 100%; height: 500px"></div>
    <div v-if="routeInfo.distance">
      <p><strong>Distance:</strong> {{ routeInfo.distance }}</p>
      <p><strong>Duration:</strong> {{ routeInfo.duration }}</p>
    </div>

    <!-- Add a button to clear markers -->
    <button
      style="margin-top: 10px; padding: 10px; background-color: #f44336; color: white; border: none; border-radius: 4px"
      @click="addMarker"
    >
      Add Markers
    </button>
    <button
      style="margin-top: 10px; padding: 10px; background-color: #f44336; color: white; border: none; border-radius: 4px"
      @click="clearAllMarkersFromMap"
    >
      Clear Markers
    </button>
  </div>
</template>

Then when I click the clearAllMarkersFromMap, the expectation all markers should be gone. But it doesnt affect the map

clearAllMarkersFromMap const clearAllMarkersFromMap = () => { markers.value.forEach((marker) => marker.setMap(null)) markers.value = [] }

Also here the function to calculate the route and add the markers calculateRoute

const markers = ref([])
const markerBaru = shallowRef(null)

const calculateRoute = (routeDatas) => {
      if (!directionsService.value || !directionsRenderer.value) return

      // Clear existing markers
      clearAllMarkersFromMap()

      // Filter out locations without latitude or longitude
      const validRoutes = routeDatas.filter(
        (route) => route && typeof route.latitude === 'number' && typeof route.longitude === 'number',
      )

      if (validRoutes.length < 2) return // Need at least origin and destination

      const origin = validRoutes[0]
      const destination = validRoutes[validRoutes.length - 1]

      const waypoints = validRoutes.slice(1, -1).map((point) => ({
        location: new google.maps.LatLng(point.latitude, point.longitude),
        stopover: true,
      }))

      const request = {
        origin: new google.maps.LatLng(origin.latitude, origin.longitude),
        destination: new google.maps.LatLng(destination.latitude, destination.longitude),
        waypoints: waypoints,
        optimizeWaypoints: props.optimizeRoute,
        travelMode: google.maps.TravelMode[props.travelMode],
      }

      directionsService.value.route(request, (result, status) => {
        if (status === 'OK') {
          directionsRenderer.value.setDirections(result)

          if (result.routes && result.routes.length > 0) {
            const route = result.routes[0]
            let totalDistance = 0
            let totalDuration = 0

            route.legs.forEach((leg) => {
              totalDistance += leg.distance.value
              totalDuration += leg.duration.value
            })

            routeInfo.value = {
              distance: totalDistance > 1000 ? `${(totalDistance / 1000).toFixed(2)} km` : `${totalDistance} m`,
              duration:
                totalDuration > 3600
                  ? `${Math.floor(totalDuration / 3600)} hours ${Math.floor((totalDuration % 3600) / 60)} minutes`
                  : `${Math.floor(totalDuration / 60)} minutes`,
            }
          }
        } else {
          console.error(`Directions request failed: ${status}`)
        }
      })

      // Filter out duplicate locations
      const uniqueRouteDatas = []
      const seenLocations = new Set()

      validRoutes.forEach((route) => {
        const position = `${route.latitude},${route.longitude}`
        if (!seenLocations.has(position)) {
          seenLocations.add(position)
          uniqueRouteDatas.push(route)
        }
      })

      // Add new markers for uniqueRouteDatas
      uniqueRouteDatas.forEach((route, index) => {
        console.log(`====: marker index`, index)
        const marker = new google.maps.Marker({
          position: { lat: route.latitude, lng: route.longitude },
          map: map.value,
          title: route.outlet_name || `Location ${index + 1}`,
          label: {
            text: `${index + 1}`,
            color: 'white',
            fontSize: '14px',
            fontWeight: 'bold',
          },
        })
        markers.value.push(marker)
      })
      console.log(`====: makers[0] before`, markers.value[0])
      console.log(`====: markers before`, markers.value)
      // markers.value[0].setMap(null)
      // markers.value.splice(0, 1)
      // console.log(`====: makers[0] after`, markers.value[0])
      // console.log(`====: markers after`, markers.value)
    }

I already debug it, the .setMap(null) doesnt work as expected which is it should remove the marker from the map. Is there any issues that I didnt notice?