Soy un poco nuevo en ReactJS y estoy trabajando en un proyecto que muestra marcadores en diferentes puntos, y los datos se reciben de un archivo JSON. Actualmente, estoy usando ventanas emergentes para mostrar información cuando se hace clic en el marcador, como se muestra:

 //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); }); });

Como se muestra arriba, la ventana emergente actualmente muestra el título y la descripción de cada marcador, proporcionados por los datos en el archivo JSON. Sin embargo, me gustaría usar algo más moderno y versátil para mostrar esta información, como una Tarjeta Grommet ( https://v2.grommet.io/card ), ya que el Mapbox Popup actual no es muy atractivo. ¿Cómo haría para hacer esto?