Polygon not being drawn on the map

[HunterJS-bit]

Hello guys, I'm having a problem, I'm not able to draw polylines on my map using react-google-maps. I have been passing Lat & Lng to my PolyLine but the line its not drawn. I do not have any idea, how to next.

import React, { useState, forwardRef, } from 'react';
import Map from './CMap';
import {
  DirectionsRenderer,
  Polyline
} from "react-google-maps";

const defaultCenter = {
  lat: 52.520008,
  lng: 13.404954
};

const defaultZoom = 11;


const MapCmp = forwardRef((props, ref) => {

  const path =
    [
      {
        "lat": 51.01643,
        "lng": 6.8847366
      },
      {
        "lat": 51.0163333,
        "lng": 6.886825
      },
      {
        "lat": 51.01347,
        "lng": 6.8883016
      },
      {
        "lat": 51.0130866,
        "lng": 6.8893633
      },
      {
        "lat": 50.9989666,
        "lng": 6.8879866
      },
      {
        "lat": 50.9806483,
        "lng": 6.8525833
      },
      {
        "lat": 50.9347766,
        "lng": 6.848945
      },
      {
        "lat": 50.9157983,
        "lng": 6.8374283
      },
      {
        "lat": 50.9183233,
        "lng": 6.8261816
      },
      {
        "lat": 50.9207,
        "lng": 6.8200566
      },
      {
        "lat": 50.9224216,
        "lng": 6.8224066
      },
      {
        "lat": 50.9223983,
        "lng": 6.8223666
      },
      {
        "lat": 50.9223883,
        "lng": 6.82237
      },
      {
        "lat": 50.922395,
        "lng": 6.8223883
      },
      {
        "lat": 50.9224016,
        "lng": 6.8223916
      },
      {
        "lat": 50.9224133,
        "lng": 6.8224066
      },
      {
        "lat": 50.9217616,
        "lng": 6.8228383
      }
    ];


  return (
    <Map
      googleMapURL={
        `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_KEY}&libraries=geometry,drawing,places`
      }
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: '100%' }} />}
      mapElement={<div style={{ height: `100%` }} />}
      defaultCenter={defaultCenter}
      defaultZoom={defaultZoom}
    >
      <Polyline path={path}
        options={{
          strokeColor: "red",
          strokeOpacity: 0.75,
          strokeWeight: 5
        }} />
    </Map >
  );

});

export default MapCmp;

Does anyone know what could be the problem ?

[JustFly1984]

@HunterJS-bit this package is unmaintained over 4 years. please use @react-google-maps/api instead.