Reactjs 不使用geojson的React中的自定义映射框图标

我试图在React中为我的mapbox中的地图标记创建自定义图标，但是基本上所有现有文档都描述了在使用geojson包装器定义一定数量的标记时如何实现这一点。这个解决方案不适合我，因为这个应用程序的标记数量需要是动态的

var el = document.createElement("div");
    el.className = 'marker';
    el.style.backgroundImage = 'url(droneIconSVG.svg)';
    el.style.width = "50000px";
    el.style.height = "50000px";

    console.log(el.style.backgroundImage);
    console.log(image01);

    var drones = {};



    firebase
      .database()
      .ref("drones")
      .on("child_added", function(snapshot) {

        var drone = new mapboxgl.Marker(el).setLngLat([snapshot.val().lat, snapshot.val().lng]).addTo(map);

        drones[snapshot.val().id] = drone;
      });

此代码显示标记的创建，以及将该标记分配给已添加到firebase中我的实时数据库中的每个“无人机”图标。关于为什么它不能正确地表示我的“droneIconSVG.svg”文件，有什么想法吗？这是我从illustrator导出的普通SVG文件

多谢各位