I am kind of new to ReactJS and am working on a project that displays markers at different points, with the data being received from a JSON file. Currently, I am using popups to display information when the marker is being clicked on, as shown:

//Map.js
geoJson.features.forEach((location, i) => {
      const el = document.createElement("div");
      el.className = "marker";
      var marker = new mapboxgl.Marker(el)
        .setLngLat(location.geometry.coordinates)
        .setPopup(
          new mapboxgl.Popup({ offset: 0, className: "popup" }).setHTML(`
            <div>
              <h1>${location.properties.title}</h1>
              <p>${location.properties.description}</p>
              <a class="popupbutton" target="_blank" href=${location.properties.link}>
                <button class="popupbutton">Website Link</button>
              </a>
            </div>
          `)
        )
        .addTo(map);
      marker.getElement().addEventListener("click", () => {
        zoomIn(i);
      });
    });

As shown above, the popup is currently displaying the title and description of each marker, provided by the data in the JSON file. However, I would like to use something more modern and versatile to display this information, such as a Grommet Card (https://v2.grommet.io/card), since the current Mapbox Popup is not very appealing. How would I go about doing this?