Can't perform a React state update on an unmounted component in MapViewDirections

Question

I am using MapViewDirections and I get the following error message.

Warning: Can't perform a React state update on an unmounted 
component. This is a no-op, but it indicates a memory leak in your 
application. To fix, cancel all subscriptions and asynchronous tasks 
in the componentWillUnmount method.
    in MapViewDirections

My current code looks as follows.

    import { StyleSheet, Text, View } from 'react-native'
    import React from 'react'
    import MapView, {Marker} from 'react-native-maps'
    import tw from 'twrnc';
    import { useSelector } from 'react-redux';
    import { selectDestination, selectOrigin } from '../../navSlice/navSlice';
    import MapViewDirections from 'react-native-maps-directions';
    import {GOOGLE_MAPS_APIKEY} from "@env";
    
    
    const Map = () => {
      const origin = useSelector(selectOrigin);
      const destination = useSelector(selectDestination);
      return (
        <MapView 
        style={tw`flex-1`}
        mapType= {'standard'}
        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="black"
        />
    
      )}
    
      {origin?.location && (
        <Marker    
          coordinate = {{
            latitude: origin.location.lat,
            longitude: origin.location.lng,
    
          }}
          title= "Origin"
          description={origin.description}
          identifier="origin"
        />
      )}
      
      </MapView>
      )
    }
    
    
    export default Map

How can I resolve the above warning?