Использование Google Directions API и вызов вызова возвращают указания по умолчанию вместо поискового запроса

Question

Я использую React и Redux. У меня есть кнопка в одном из моих контейнеров, которая запускает вызов извлечения для API направления Google. При первом щелчке по кнопке отправки отображаются инструкции по умолчанию из API вместо того, что вводится в поля ввода. Я должен дважды нажать кнопку отправки, чтобы отобразить введенные направления, что не очень хорошо.

вот мой вызов вызова:

const fetchCall = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    console.error(Error(response.statusText));
    return 'failed'
  }
  const promise = await Promise.resolve(response)
  return await response.json();
}

export default fetchCall;

вот мой редуксный стук:

(cleaner.originAndDeparture - это URL-адрес API как функция, которая принимает начало, отправление и режим)

import fetchCall from '../../utilities/fetchCall';
import * as cleaner from '../../utilities/cleaner';
import { isLoading, setDirections } from '../index'

export const getCurrentDirections = (origin, departure, mode) => {
  return async (dispatch) => {
    dispatch(isLoading(true));
   try {
      const directions = await fetchCall(cleaner.orignAndDeparture(origin, departure, mode));
      await directions
      dispatch(isLoading(false));
      return dispatch(setDirections(directions));
   } catch(error) {
      console.log('this is the error block')
      console.log(error.message)
   }
  }
}

А вот мой компонент, который принимает входные данные:

export class SearchDirections extends Component {
  constructor() {
    super()
    this.state = {
      origin: '',
      departure: '',
      mode: ''
    }
  }

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    })
  };

  handleRadioChange = (e) => {
  this.setState({
    mode: e.target.value
  });
}

  handleSubmitSearch = async (e) => {
    e.preventDefault();
    await this.props.getDirections(this.props.getNewDirections(this.state.origin, this.state.departure, this.state.mode))
    let startCoordinates = this.props.directions.routes[0].legs[0].start_location 
    let endCoordinates = this.props.directions.routes[0].legs[0].end_location
  };

  render() {
    console.log(this.state.origin, this.state.departure, this.state.mode)
    return (
      <form
        onSubmit={this.handleSubmitSearch}>
        <input
        placeholder='enter origin' 
        className='origin'
        name='origin' 
        value={this.state.origin}
        onChange={(e) => this.handleChange(e)}
        />
        <input 
        placeholder='enter departure' 
        className='departure'
        name='departure' 
        value={this.state.departure}
        onChange={(e) => this.handleChange(e)}       
        />
        <NavLink to='/directions'> <button disabled={!this.state.mode} className='submit-btn'>submit</button></NavLink>
        <ul>
          <li>
            <label>
              <input 
              className='radio'
              type='checkbox' 
              value='transit' 
              name='radio' 
              checked={this.state.mode === 'transit'}
              onChange={this.handleRadioChange}
              />
              transit
           </label>
          </li>
          <li>
            <label>
              <input 
              className='radio'
              type='checkbox' 
              value='walking' 
              name='radio'
              checked={this.state.mode === 'walking'}
              onChange={this.handleRadioChange}
            />
              walking
            </label>
          </li>
          <li>  
            <label>
              <input 
              className='radio'
              type='checkbox' 
              value='bicycling' 
              name='radio'
              checked={this.state.mode === 'bicycling'}
              onChange={this.handleRadioChange}
              />
              bicycling
            </label>
          </li> 
          <li> 
            <label>
              <input 
              className='radio'
              type='checkbox'  
              value='driving' 
              name='radio'
              checked={this.state.mode === 'driving'}
              onChange={this.handleRadioChange}
              />
              driving
            </label>
          </li>
        </ul>
      </form>
    )
  }
}


export const mapStateToProps = (state) => ({
  directions: state.directions,
  startWeather: state.test,
  isLoading: state.isLoading
});

export const mapDispatchToProps = (dispatch) => ({
  getNewDirections: (origin, departure, mode) => dispatch(getCurrentDirections(origin, departure, mode)),
  displayWeatherStart: (city) => dispatch(getCurrentWeather(city)),
});

export default connect(mapStateToProps, mapDispatchToProps)(SearchDirections);