GooglePlacesAutocompleteとgoogle-map-reactを共存させる方法

前提・実現したいこと

現在React.jsを用いて投稿型webアプリを制作しています。
メインのコードは書き終えたのですが１箇所だけwarningが解決しないため、是非皆さんの知恵を貸していただきたいです。
エラーは以下の通りです。

発生している問題・エラーメッセージ

Aborted attempt to load Google Maps JS with @googlemaps/js-api-loader.This may result in undesirable behavior as script parameters may not match.

該当のソースコード

Map.js
1import GoogleMapReact from "google-map-react";
2...
3//住所から地名を取得
4  const Geocoding = useCallback(() => {
5    Geocode.setApiKey("AIzaSyDUDTHfWX33hew2WbRittJIKhHfVWgz5dY");
6    Geocode.fromAddress(prop.address).then(
7      (response) => {
8        const { lat, lng } = response.results[0].geometry.location;
9        setSpotLat(lat);
10        setSpotLng(lng);
11        console.log(lat, lng);
12      },
13      (error) => {
14        console.error(error);
15      }
16    );
17  }, [prop.address]);
18  useEffect(() => {
19    Geocoding();
20  }, [Geocoding]);
21...
22    <GoogleMapReact
23        bootstrapURLKeys={{ key: "AIzaSyDUDTHfWX33hew2WbRittJIKhHfVWgz5dY" }}
24        center={{
25          lat: spotLat,
26          lng: spotLng,
27        }}
28        defaultZoom={16}
29        yesIWantToUseGoogleMapApiInternals
30      >

Map.js
1import GooglePlacesAutocomplete from "react-google-places-autocomplete";
2...
3                      <GooglePlacesAutocomplete
4                        apiKey="AIzaSyDUDTHfWX33hew2WbRittJIKhHfVWgz5dY"
5                        selectProps={{
6                          value: courseSpotAddress,
7                          onChange: setcourseSpotAddress,
8                          placeholder: "名前を打ち込んでください（例　神戸駅）",
9                        }}
10                        apiOptions={{ language: "jp", region: "jp" }}
11                        menuContainerStyle={{ zIndex: 999 }}
12                        //style={styles.tweet_input}
13                        menuPortalTarget={document.body}
14                        menuPosition={"fixed"}
15                      />