Leaflet custom marker with divIcon crashes on ios

I am working on a website that features a map with different locations to that open additional information on click.

The site works well on desktop, but on mobile the site refreshes until the following error appears “a problem repeatedly occurred”. I have done several tests and I realized it happens when I use the custom L.divIcon but I don’t see anything wrong there.

const locations = [
              {
          "key" : "aquarium",
          "title" : "aquarium",
          "time" : "present",
          "lat" : "52.4986179",
          "lon" : "13.4165594",
        },
              {
          "key" : "andenbuch",
          "title" : "andenbuch",
          "time" : "present",
          "lat" : "52.4889454",
          "lon" : "13.4029223",
        },
              {
          "key" : "poropati",
          "title" : "Poropati",
          "time" : "present",
          "lat" : "52.4804748",
          "lon" : "13.4464375",
        }];

for (let index = 0; index < locations.length; index++) {
        marker = L.marker([locations[index].lat, locations[index].lon], {
          icon: L.divIcon({
            className: `marker marker-category-${locations[index].time}`,
            html: `
              <div class="pin"></div>
              <div class="title">${locations[index].title}</div>
            `
          }),
        }).addTo(map).on('click', () => { openModal(locations[index].key) });
      }

I have tried reorganizing the code, when I removed the divIcon and used the default marker it worked, but I need a custom marker.