Google maps Geocoding API error [Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'data.results[0].geometry')] – React native

I am facing an error regarding Geocoding API.

I am trying to get the coordinates when the user presses this button

<TouchableOpacity
            style={tw`flex-row items-center p-5`}
            onPress={() => {
              dispatch(
                setDestination({
                  geometry: {
                    location: { lat: 3.0023237, lng: 101.7059165 },
                  },
                  description,
                }),
              );
            }}
          >

Here is the full code of Map.js:

import { StyleSheet, Text, View } from 'react-native';
import React, { useEffect, useRef, useState } from 'react';
import MapView, { Marker } from 'react-native-maps';
import tw from 'twrnc';
import { useDispatch, useSelector } from 'react-redux';
import {
  selectDestination,
  selectOrigin,
  setDestination,
  setTravelTimeInformation,
  setMarker,
} from '../slices/navSlice';
import MapViewDirections from 'react-native-maps-directions';
import { GOOGLE_MAPS_APIKEY } from '@env';



const Map = () => {
  const origin = useSelector(selectOrigin);
  const destination = useSelector(selectDestination);
  const mapRef = useRef(null);
  const dispatch = useDispatch();

  useEffect(() => {
    if (!origin || !destination) return;
    mapRef.current.fitToSuppliedMarkers(['origin', 'destination'], {
      edgePadding: { top: 50, right: 50, bottom: 50, left: 50 },
    });
  }, [origin, destination]);

  useEffect(() => {
    if (!origin || !destination) return;

    const getTravelTime = async () => {
      fetch(
        `https://maps.googleapis.com/maps/api/distancematrix/json?destinations=${destination.description}&origins=${origin.description}&units=imperial&key=${GOOGLE_MAPS_APIKEY}`,
      )
        .then((res) => res.json())
        .then((data) => {
          dispatch(setTravelTimeInformation(data.rows[0].elements[0]));
        });
    };
    getTravelTime();
  }, [origin, destination, GOOGLE_MAPS_APIKEY]);

  useEffect(() => {
    if (!origin || !destination) return;

    const getCoordinates = async () => {
      fetch(
        `https://maps.googleapis.com/maps/api/geocode/json?address=${destination.description}&key=${GOOGLE_MAPS_APIKEY}`,
      )
        .then((res) => res.json())
        .then((data) => {
          dispatch(setDestination(data.results[0].geometry.location));
        });
    };
    getCoordinates();
  }, [destination, GOOGLE_MAPS_APIKEY]);

  return (
    <MapView
      ref={mapRef}
      showsUserLocation
      style={tw`flex-1`}
      mapType="mutedStandard"
      initialRegion={{
        latitude: origin.location.lat,
        longitude: origin.location.lng,
        latitudeDelta: 0.005,
        longitudeDelta: 0.005,
      }}
    >
      {origin && destination && (
        <MapViewDirections
          origin={origin.description}
          destination={destination.description}
          apikey={GOOGLE_MAPS_APIKEY}
          strokeWidth={3}
          strokeColor="blue"
        />
      )}
      {origin?.location && (
        <Marker
          pinColor={'green'}
          coordinate={{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
          }}
          title="Origin"
          description={origin.description}
          identifier="origin"
        />
      )}

      {destination?.location && (
        <Marker
          coordinate={{
            latitude: destination.location.lat,
            longitude: destination.location.lng,
          }}
          title="Destination"
          description={destination.description}
          identifier="destination"
        />
      )}
    </MapView>
  );
};

export default Map;

The exact part that causes the error is this:

   useEffect(() => {
    if (!origin || !destination) return;

const getCoordinates = async () => {
  fetch(
    `https://maps.googleapis.com/maps/api/geocode/json?address=${destination.description}&key=${GOOGLE_MAPS_APIKEY}`,
  )
    .then((res) => res.json())
    .then((data) => {
      dispatch(setDestination(data.results[0].geometry.location));
    });
};


  getCoordinates();
  }, [destination, GOOGLE_MAPS_APIKEY]);

it comes from this:

 .then((data) => {
      dispatch(setDestination(data.results[0].geometry.location));
    });

The error:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'data.results[0].geometry')]
at node_modulespromisesetimmediatecore.js:null in tryCallOne
at node_modulespromisesetimmediatecore.js:null in setImmediate$argument_0
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:null in _allocateCallback$argument_0
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:null in _callTimer
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:null in _callReactNativeMicrotasksPass
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:null in callReactNativeMicrotasks
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:null in __callReactNativeMicrotasks
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:null in __guard$argument_0
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:null in __guard
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:null in flushedQueue

the reducer js file:
NavSlice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  origin: null,
  destination: null,
  travelTimeInformation: null,
  marker: {},
};

export const navSlice = createSlice({
  name: 'nav',
  initialState,
  reducers: {
    setOrigin: (state, action) => {
      state.origin = action.payload;
    },
    setDestination: (state, action) => {
      state.destination = action.payload;
    },
    setTravelTimeInformation: (state, action) => {
      state.travelTimeInformation = action.payload;
    },
  },
});

export const { setOrigin, setDestination, setTravelTimeInformation } = navSlice.actions;


export const selectOrigin = (state) => state.nav.origin;
export const selectDestination = (state) => state.nav.destination;
export const selectTravelTimeInformation = (state) => state.nav.travelTimeInformation;
export default navSlice.reducer;

store.js

import { configureStore } from '@reduxjs/toolkit';
import navReducer from './slices/navSlice.js';

export const store = configureStore({
  reducer: {
    nav: navReducer,
  },
});

I am not very sure on why this is not working, any ideas? This should work similarly to when you set the destination to your favorite location. Like Uber.