async showDirectionOnMap(placeId){
        const { userLatitude, userLongitude, wayPoints, markers } = this.state;
        try{
            let  result = await axios.get(
                `https://maps.googleapis.com/maps/api/directions/json?key=${MY_API_KEY}&origin=${userLatitude},${userLongitude}&destination=place_id:${placeId}`
            );

            console.log(`This is result.data`, result.data);
            let points = PolyLine.decode(
                result.data.routes[0].overview_polyline.points
            )

            let latLng = points.map(point => ({
                latitude: point[0],
                longitude: point[1],
            }));
            this.setState({
                destination: placeId,
                destinationCoords: [...this.state.destinationCoords, latLng],
                wayPoints: [...wayPoints, latLng],
                markers: [...markers, latLng],
            });
            this.map.current.fitToCoordinates(latLng, {
                edgePadding:{
                    top: 40,
                    bottom: 40,
                    left: 40,
                    right: 40
                }
            });
            console.log('Lets see what happen')
            console.log(latLng);
            console.log(latLng.length)
            console.log('Hold on')
            console.log(points)
            console.log('This is wayPoints: ' + wayPoints)
            console.log('This is markers: ' + markers)

        } catch(err){
            console.error(err);
        }

    }

    async getPlaceDetails(){
        const {destination} = this.state
        try{
            let result = await axios.get(
                `https://maps.googleapis.com/maps/api/place/details/json?key=${MY_API_KEY}&place_id=${destination}`
            );
            let locationDecoded = result["result"]["geometry"]["location"]
            this.setState({
                userLatitude: locationDecoded["lat"],
                userLongitude: locationDecoded["lng"]
            })
            console.log('This is another userLatitude: ', this.state.userLatitude)
            console.log('This is another userLongitude: ', this.state.userLongitude)
        }catch{(err) => {
            console.log(err)
        }}
    }


    onAddSearch(){
        this.getPlaceDetails(); // It doesn't excute :(

        this.setState((state) => ({
            counter: state.counter + INCREMENT,
            numOfInput: [...state.numOfInput, state.counter],
        }));


        console.log('These are destinationCoords: ', this.state.destinationCoords)
        console.log('This is destination ', this.state.destination)
        console.log('This is: destinationCoords[0]: ')
        console.log(this.state.destinationCoords[0])
        console.log('Wait')
        console.log(this.state.destinationCoords[0][0])
        console.log(this.state.destinationCoords[0][0].latitude)
        console.log('These are markers: ', this.state.markers)
        console.log('This is userLatitude: ', this.state.userLatitude)
        console.log('This is userLongitude: ', this.state.userLongitude)
        // console.log(this.state.counter);
        // console.log(this.state.numOfInput);
    }