DirectionsRenderer overwrite the Marker when rendering

I'm working on setting up a tracking system so customers can see where their deliveries are in real-time. I managed to setup for marker destination and pickup location along with route path toward it. The issues is when I tried to render it, Two Custom Markers being overwrote/overlapped by the existing two (including the one with bike icon). Here is pic of what happening.

My Question is there any way to show custom Markers instead of DirectionRenderer Marker? Here is my implementation.

"use client";
import React,{useEffect,useState} from 'react'
import { GoogleMap, useJsApiLoader,Marker,DirectionsRenderer } from '@react-google-maps/api';
import { DeliveryData } from '@/lib/types';
const containerStyle = {
  width: '400px',
  height:'400px '
};

let directionsService: google.maps.DirectionsService;

function MapContainer({ deliveryData }: { deliveryData: DeliveryData }) {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || ""
  });
  
  const pickupCoordinates = {
    lat: -33.8827923,
    lng: 151.1959758
  }

  const deliveryCoordinates = {
    lat: -33.8876642,
    lng: 151.2086783
  }
  
  const [deliveryGuyPosition, setDeliveryGuyPosition] = useState(deliveryCoordinates);
  const [directions, setDirections] = useState<google.maps.DirectionsResult | null>(null);
  
  const [_, setMap] = React.useState<google.maps.Map | null>(null)

  const onLoad = React.useCallback(function callback(map: google.maps.Map) {
    const bounds = new window.google.maps.LatLngBounds();
    directionsService = new google.maps.DirectionsService();
    bounds.extend(deliveryCoordinates);
    bounds.extend(pickupCoordinates);
    map.fitBounds(bounds);    
    changeDirection(pickupCoordinates, deliveryCoordinates);
    setMap(map)
  }, []);

  const changeDirection = (origin: any, destination: any) => {
    directionsService.route(
      {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
      },
      (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          // Change the state of directions to the result of direction service
          setDirections(result);
        } else {
          console.error(`Error fetching directions ${result}`);
        }
      }
    );
  };

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

  return (isLoaded && <GoogleMap mapContainerStyle={containerStyle} onLoad={onLoad} onUnmount={onUnmount}>
      
      {directions !== null && <DirectionsRenderer directions={directions} />}
      <Marker position={pickupCoordinates} title="pick up loaction"
        icon={'images/destination.png'}
      />
      <Marker position={deliveryGuyPosition} title="Delivery Guy"
      icon={'images/delivery.png'}
      />
      </GoogleMap>)

}

export default React.memo(MapContainer)

It's not particularly solution I fond of but I found a way to overcome the issue. The markeroptionsin DirectionsRender not allowed to style individually. Therefore I put the transparent background as in option to hide it. For example it would be something like this

 <GoogleMap mapContainerStyle={containerStyle} onLoad={onLoad} onUnmount={onUnmount}>
      {directions !== null && <DirectionsRenderer directions={directions}
      options={{
        markerOptions: {
          icon: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==",
        }
    }} 
      />}
      <Marker position={pickupCoordinates} title="pick up location" icon={'images/destination.png'} />
      <Marker position={deliveryGuyPosition} title="Delivery Guy" icon={"images/delivery.png"} />
</GoogleMap>