Пользовательские иконки MapBox в React без геойсона

Question

Я пытаюсь создать пользовательские значки для маркеров моей карты в моем картографическом окне в React, однако, по существу, во всей существующей документации описывается, как выполнить sh, когда вы используете обертку geo json для определения установленного количества. маркеров. Это решение не работает для меня, так как количество маркеров для этого приложения должно быть динамическим c.

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" должным образом? Это обычный SVG-файл, который я экспортировал из иллюстратора.

Спасибо