Unhandled Runtime Error InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object; and not an Object

[man13sh]

Hi I am using nextjs, while using the directionservice , even though I am getting the direction with the route drawn but I am getting the following error

Unhandled Runtime Error InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object; and not an Object

I have searched for other error on SO - and converted the lat/lng into ParseFloat/Numbers - it does not seems to help get rid of this error

Sorry for my ignorance as I am submitting for the first time - I am unable to format the full code into codeblock

` import React, { useState, useEffect } from "react" import { GoogleMap, useLoadScript, Marker, InfoWindow, DirectionsService, DirectionsRenderer } from "@react-google-maps/api" import usePlacesAutocomplete, { getGeocode, getLatLng } from "use-places-autocomplete"; import { YOUR_API_KEY } from "../../action/type"; import Cookies from "universal-cookie"; import Link from "next/link" import mapStyles from "../../components/maps/mapStyles";

const libraries = ["places"]; const mapContainerStyle = { height: "100vh", width: "100vw", }; const options = { styles: mapStyles, disableDefaultUI: true, zoomControl: true, }; const center = { lat: 12.944510983311575, lng: 77.58750509580075, };

export default function Map10() { const cookies = new Cookies(); const { isLoaded, loadError } = useLoadScript({ googleMapsApiKey: YOUR_API_KEY, libraries, });

const [directionState, setdirectionState] = useState({
    response: null,
    travelMode: "DRIVING", origin: { lat: 12.9148979, lng: 77.6126707} ,destination: { lat: 12.9189841, lng: 77.5704496} ,

})



const directionsCallback = (response) => {
    console.log(response)

    if (response !== null) {
        if (response.status === "OK") {
            setdirectionState({ response })
            //     () => ({response})
            // )
        } else {
            console.log("response: ", response)
        }
    }
}

const checkDriving = ({ target: { checked } }) => {
    checked &&
        this.setState(
            () => ({
                travelMode: "DRIVING"
            })
        )
}

const checkBicycling = ({ target: { checked } }) => {
    checked &&
        this.setState(
            () => ({
                travelMode: "BICYCLING"
            })
        )
}

const checkTransit = ({ target: { checked } }) => {
    checked &&
        this.setState(
            () => ({
                travelMode: "TRANSIT"
            })
        )
}

const checkWalking = ({ target: { checked } }) => {
    checked &&
        this.setState(
            () => ({
                travelMode: "WALKING"
            })
        )
}

const getOrigin = (ref) => {
    this.origin = ref
}

const getDestination = (ref) => {
    this.destination = ref
}

const onClick = () => {
    if (this.origin.value !== " && this.destination.value !== ") {
        this.setState(
            () => ({
                origin: this.origin.value,
                destination: this.destination.value
            })
        )
    }
}

const onMapClick = (...args) => {
    console.log("onClick args: ", args)
}


const handleFinishBooking = () => {

console.log("show confirm booking page");

}
const handleBooking = () => {

    console.log("show confirm booking  page");
}

const mapRef = React.useRef();
const onMapLoad = React.useCallback((map) => {
    mapRef.current = map;
}, []);

if (loadError) return "Error";
if (!isLoaded) return "Loading...";

return (


    <div>

        <button className="btn btn-sm btn-info p1 m-1" onClick={handleBooking}>Book Now</button>

        <Link href="/book" ><a className="btn btn-sm btn-info p1 m-1">Add More locations</a></Link>
        {/* <Link href="/admin/print-vehicle-planning/"><a target="_blank" rel="noreferrer" className="btn btn-block btn-sm btn-outline-info"><AiFillPrinter /></a></Link> */}


        <GoogleMap
            id="map"
            mapContainerStyle={mapContainerStyle}
            zoom={8}
            center={center}
            options={options}
            //   onClick={onMapClick}
            onLoad={onMapLoad}


            // optional
            onUnmount={map => {
                console.log("DirectionsRenderer onUnmount map: ", map)
            }}
        >
            {
                (
                    directionState.destination !== " &&
                    directionState.origin !== "
                ) && (
                    <DirectionsService
                        // required
                        options={{ // eslint-disable-line react-perf/jsx-no-new-object-as-prop
                            destination: directionState.destination,
                            origin: directionState.origin,
                            travelMode: directionState.travelMode,
                            // waypoints: DirectionsWaypoint,
                        }}
                        // required
                        callback={directionsCallback}
                        // optional
                        onLoad={directionsService => {
                            console.log("DirectionsService onLoad directionsService: ", directionsService)
                        }}
                        // optional
                        onUnmount={directionsService => {
                            console.log("DirectionsService onUnmount directionsService: ", directionsService)
                        }}
                    />
                )
            }

            {
                directionState.response !== null && (
                    <DirectionsRenderer
                        // required
                        options={{ // eslint-disable-line react-perf/jsx-no-new-object-as-prop
                            directions: directionState.response
                        }}
                        // optional
                        onLoad={directionsRenderer => {
                            console.log("DirectionsRenderer onLoad directionsRenderer: ", directionsRenderer)
                        }}
                        // optional
                        onUnmount={directionsRenderer => {
                            console.log("DirectionsRenderer onUnmount directionsRenderer: ", directionsRenderer)
                        }}
                    />
                )
            }
        </GoogleMap>
    </div>
);

}

`

os: windows

node --version

react version -17

@react-google-maps/api version 2.20

[JustFly1984]

please provide minimal reproduction in codesandbox