InvalidValueError: setIcon: not a string; and no url property; and no path property

[MAyankprine20001]

when i call this first time for dropping the image in the map then is show me error InvalidValueError: setIcon: not a string; and should be a PinView; and no url property; and no path property . this is come when is call import React from "react";
import { Marker } from "@react-google-maps/api";

const DraggableMarker = ({
gatePosition,
gateImage,
handleGateDrag,
handleGateDrop,
gateId,
rotation,
}) => {
// console.log("gate image" , pos)
const onDragEnd = (e) => {
const newLat = e.latLng.lat();
const newLng = e.latLng.lng();
handleGateDrop({ lat: newLat, lng: newLng }, gateId);
};

const onDrag = (e) => {
const newLat = e.latLng.lat();
const newLng = e.latLng.lng();
handleGateDrag({ lat: newLat, lng: newLng });
};

return (

<Marker
position={gatePosition}
draggable
onDrag={onDrag}
onDragEnd={onDragEnd}
icon={{
path: gateImage,
scale: 0.07,
fillColor: "#000000",
fillOpacity: 1,
strokeWeight: 0.7,
anchor: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(30, 30),
rotation: rotation,
}}
options={{
crossOnDrag: false,
}}
/>

);
};

export default DraggableMarker;
can any resolv this