Google Map React component loses data when placed into divs

Question

I have a working GoogleMapReact component that takes latitude and longitude, and places markers on the map. The problem I face is I need to style the Marker component and when I place it into DIV or any other html element, all markes lose their coordinates and are just in vertical row on the map.

Here is the code:

import React, { useState } from "react";
import GoogleMapReact from "google-map-react";
import getCenter from "geolib/es/getCenter";
import Marker from "../components/Marker";

function MapMe1({ searchResults }) {
  

  //transform the search results object into {latitude,longitude} format
  const coordinates = searchResults.map((result) => ({
    longitude: result.long,
    latitude: result.lat,
  }));

  const center = getCenter(coordinates);

  const [viewport, setViewport] = useState({
    width: "600px",
    height: "max-height: 75%",

    center: { lat: center.latitude, lng: center.longitude },

    zoom: 11,
  });

  return (
    <GoogleMapReact
      //mapContainerStyle={containerStyle}

      bootstrapURLKeys={{ key: process.env.google_maps_key }}
      {...viewport}
      onViewportChange={(nextViewport) => setViewport(nextViewport)}
    >
      {searchResults.map((result) => (
      // It works, but if I wrap this in <div> lat and lng no longer available...
        <Marker
          lat={result.lat}
          lng={result.long}
          offsetLeft={-20}
          offsetTop={-10}
          titles={result.title}
        />
      ))}
    </GoogleMapReact>
  );
}

export default MapMe1;

I want to style the marker to show a tooltip but for some reason is the Marker component loses all data. Why is this happening?