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); }} /> </StandaloneSearchBox> )} </Form.Item> ); });

export default GoogleAddress;

errors : -

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

The above error occurred in the StandaloneSearchBox component

Answers are welcome ! -thanks in advance