When I use google-maps-react to integrate maps, map loads correctly and even shows the correct markers but I am having some issues.

1- A styling issue normally map component overlays the content I think because it has position absolute but when I change its position to relative it does not show. I have placed it in a div everything above the div shows but it overlays the content below the div.

2- it is giving errors in the console (I am listing them below)

• Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. Move data fetching code or side effects to componentDidUpdate.If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps.

• Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Wrapper component.

My mapComponent:

import React from "react";
import { Map, Marker, GoogleApiWrapper } from "google-maps-react";

export function MapContainer({ google, captains = [] }) {
  const mapStyles = {
    width: "85%",
    height: "100%",
  };

  return (
    <Map
      google={google}
      // containerStyle={{
      //   position: "absolute",
      //   width: "85%",
      //   height: "40%",
      // }}
      // style={mapStyles}
      containerStyle={mapStyles}
      initialCenter={{
        lat: captains[0].location.coordinates[1],
        lng: captains[0].location.coordinates[0],
      }}
      zoom={captains.length === 1 ? 18 : 13}
    >
      {captains.map((captain) => (
        <Marker
          key={captain._id}
          position={{
            lat: captain.location.coordinates[1],
            lng: captain.location.coordinates[0],
          }}
        />
      ))}
    </Map>
  );
}

export default GoogleApiWrapper({
  apiKey: "#############################",
})(MapContainer);

Here is where I am using it:

import MapContainer from "../components/MapContainer";

function Captains({ captains }) {


  return (
    
      <div className=" h-screen overflow-auto">
        <div className="pt-24 pl-20 flex flex-col">
          <othercontent ..... />
          <div className="visible h-1/3 w-10/12 mx-5">
            <MapContainer captains={captains} />
            
          </div>
          <PaginationTable
             .....
          />
        </div>
      </div>
    </>
  );
}