Standalone search Box Error

[Villva-vinoth]

import { Form, Input } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { useJsApiLoader, StandaloneSearchBox } from "@react-google-maps/api";
import { FormItems } from "../types.form";
const libraries = ['places'];
const GoogleAddress = React.memo((formItem: FormItems) => {
const { name, initialValue, rules, disabled, placeholder } = formItem;
const form = Form.useFormInstance();

const { isLoaded ,loadError} = useJsApiLoader({
id: "google-map-script",
googleMapsApiKey: "process.env.MAP_KEY",
[libraries] :libraries,
});
const [address, setAddress] = useState(initialValue || "");
const inputRef = useRef<google.maps.places.SearchBox | null>(null);
const handlePlaceChange = () => {
if (inputRef.current) {
const places = inputRef.current.getPlaces();
if (places && places.length > 0) {
const formattedAddress = places[0].formatted_address || "";
setAddress(formattedAddress);
form.setFieldValue(name, formattedAddress);
}
}
};
console.log("isloaded", isLoaded,loadError);
useEffect(() => {
const fieldValue = form.getFieldValue(name);
if (fieldValue && fieldValue !== address) {
setAddress(fieldValue);
}
}, [name, address, form]);
if (!isLoaded || loadError) return

Loading...

;
return (
<Form.Item style={{ width: "100%" }} initialValue={initialValue} name={name} rules={rules}>
{isLoaded && (
<StandaloneSearchBox onLoad={(ref) => (inputRef.current = ref)} onPlacesChanged={handlePlaceChange}>
<Input
placeholder={placeholder || "Enter address"}
disabled={disabled}
value={address}
onChange={(e) => {
setAddress(e.target.value);
form.setFieldValue(name, e.target.value);
}}
/>

)}
</Form.Item>
);
});

export default GoogleAddress;

errors : -

You need to provide libraries={["places"]} prop to '' component undefined

The above error occurred in the StandaloneSearchBox component

Answers are welcome !
-thanks in advance