How to solve the error “TypeError: Cannot read properties of undefined (reading ‘0’)”

I’m building a uber clone and I am the code below to get the price of the ride using the route duration but I keep getting an error
code here:

 const [rideDuration, setRideDuration] = useState(0);

  useEffect(() => {
    rideDuration = fetch(
     `https://api.mapbox.com/directions/v5/mapbox/driving/${pickupCoordinates[0]}, ${pickupCoordinates[1]};${dropoffCoordinates[0]}, ${dropoffCoordinates[1]}?access_token=pk.eyJ1IjoidGhlb2xhYWsiLCJhIjoiY2t2a3R0ajRpMDEzYzJxcWY4ZXN4azlsbSJ9.-W4Ax1SOIIGrkmu_swQ92A`
          )
    .then(res => res.json())
         .then(data => {
    setRideDuration(data.routes[0].duration / 100)
    })
        }, [pickupCoordinates, dropoffCoordinates])

It worked once i.e the price only showed once, then stopped working I keep getting “TypeError: Cannot read properties of undefined (reading ‘0’)” as the error