How to avoid performance loss when using Google Map?

Question

JavaScript

Good day to all.
I am writing a website in React JS and I need to use google maps.
I found this solution: google-maps-react
And everything would be fine, BUT I would also like to achieve good results on "Google PageSpeed ​​Insights".
When using the card, the indicator on mobile devices drops to 34-35, and when turned off it rises to 65-67, yes, I understand that 65-67 is also not the best result, but still it is better than 34-35.
Tried using: react-lazyload however it didn't help.

I also considered the option with React.Lazy and Suspense, but this did not help either. The code for the component with the map and the one that wraps it in Suspense and LazyLoad is provided below.

Container component, with LazyLoad and Suspense:

import React, {Suspense} from 'react';

/* Comnponents */
// import MyMap from './MyMap'

/* Libs */
import LazyLoad from 'react-lazyload';

const MyMap = React.lazy(() => import('./MyMap'));

const GoogleMap = (props) => {

    return(
            <Suspense fallback={<div>Fancy loading container!</div>}>
                <LazyLoad once>
                        <MyMap {...props} />
                </LazyLoad>
            </Suspense>
    )
}

export default GoogleMap

Component with map:

import React,{ useEffect, useState} from 'react'

/* Libs */
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';

const MyMap = ({
        width="300px", 
        height="300px", 
        lat = 48.00, 
        lng = -122.00,
        zoom = 8,
        className,
        ...props
    }) => {
        let [cords, setCords] = useState({lat: lat, lng: lng})
        const mapStyles = {
            width: width, height: height
        }


        useEffect(()=>{
            if (lat !== cords.lat && lng !== cords.lng) {
                setCords({lat: lat, lng: lng})
            }
        }, [lat, lng, cords, setCords])

    return(
        <div className={className ? className : ""} style={{position: "relative", ...mapStyles, marginTop: "20px"}}>
                <Map google={props.google}
                    containerStyle={{width: "100%"}}
                    zoom={zoom}
                    style={mapStyles}
                    initialCenter={{ lat: cords.lat, lng: cords.lng}}
                    center={{ lat: cords.lat, lng: cords.lng}}
                    >

                            <Marker position={{ lat: cords.lat, lng: cords.lng}} />
                </Map>
        </div>
    );
}

export default GoogleApiWrapper({
    apiKey: '*тут мой API*'
  })(MyMap);