ReactでGoogle MapのAPIを取得したい

勉強の過程でReact.jsを使いGoogleMapを表示させるためにGoogle　Cloud PlatformからAPIを取得するところまではできたのですが、いざブラウザで確認するとOops! Something went wrong.という画面になりMapを表示できません。
APIはHTTP リファラーの設定も行いました。


コード
import React from "react";
import{GoogleMap, withScriptjs,Marker, withGoogleMap} from "react-google-maps";


   class App extends React.Component {
     render() {


       const MapWithAMarker = withScriptjs(withGoogleMap(props =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker
      position={{ lat: -34.397, lng: 150.644 }}
    />
  </GoogleMap>
));

       return(
         <MapWithAMarker
           googleMapURL="https://maps.googleapis.com/maps/api/js?key={AIzaSyAAwHs8JUHn6CnUorwcVs5tplIHp3JJkiU}&v=3.exp&libraries=geometry,drawing,places"
           loadingElement={<div style={{ height: `100%` }} />}
           containerElement={<div style={{ height: `400px` }} />}
           mapElement={<div style={{ height: `100%` }} />}
         />
       );
     }
   }

export default App;

このようなエラーがでてしまいます。

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: withGoogleMap(Component)

Learn more about this warning here: https://reactjs.org/link/legacy-context
at withGoogleMap(Component) (http://localhost:3000/static/js/0.chunk.js:48811:36)
at withScriptjs(withGoogleMap(Component)) (http://localhost:3000/static/js/0.chunk.js:48971:36)
at App (http://localhost:3000/static/js/main.chunk.js:48:1)

バージョンはこのようなものです。

{
  "name": "map-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-google-maps": "^9.4.5",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

ぜひご教授いただきたいです。