getting iconUrl not set in Icon options error when using L.kml

[Rounak-Dwary]

import { useEffect } from 'react'
import L from 'leaflet'
import { useLeafletContext } from '@react-leaflet/core'
import 'leaflet-kml'

const KMLayer = () => {
const context = useLeafletContext()
const container = context.layerContainer || context.map

useEffect(() => {
let track = null
fetch('./beam.kml')
.then((res) => res.text())
.then((kmltext) => {
const parser = new DOMParser()
const kml = parser.parseFromString(kmltext, 'text/xml')
const icon = L.icon({
iconUrl: '../image_san/hub_green.png',
iconSize: [20, 70],
})
track = new L.KML(kml, {
iconOptions: icon,
})
container.addLayer(track)
})
return () => {
container.removeLayer(track)
}
}, [container])

return null
}

export default KMLayer

This gives the following error:
Icon.js:109 Uncaught Error: iconUrl not set in Icon options (see the docs).
at NewClass._createIcon (Icon.js:109:1)
at NewClass.createIcon (Icon.js:95:1)
at NewClass._initIcon (Marker.js:215:1)
at NewClass.onAdd (Marker.js:122:1)
at NewClass._layerAdd (Layer.js:114:1)
at NewClass.whenReady (Map.js:1477:1)
at NewClass.addLayer (Layer.js:172:1)
at NewClass.eachLayer (LayerGroup.js:122:1)
at NewClass.onAdd (LayerGroup.js:106:1)
at NewClass._layerAdd (Layer.js:114:1)
The beam.kml is in public folder.