Последовательный вызов функций в React

Всем доброго времени суток! Есть значит у меня страница на которой происходит добавление объявлений. По клику на кнопку "Добавить" мы отправляем запрос на сервер, и нам возвращается окей если добавление прошло успешно. Так же есть функция, которая выводит список объявлений. И соответственно необходимо чтобы при успешном добавлении нового объявления запускалось обновление списка. Сейчас это написано вот таким образом:

stopSubmit = async (e) =>{
        e.preventDefault();
       await this.props.createDetaile(
            this.state.adsFormControls.detailName.value
        )
        await this.props.getAds(this.props.userUrl)
    }

Но функция getAds срабатывает еще до того, как объявление добавилось. Сейчас временно реализовал эту штуку через SetTimeOut, просто поставив задержку в 3 секунды, но понимаю что это не правильный подход. Сами функции в экшенах выглядят так: createDetaile:

export default function createDetaile(name){
    return async dispatch => {
   
    let fileData = new FormData();
    fileData.append('name', name) 
    const url = ''
        try{
           await Axios.post(url, fileData)
        }catch(e){
            console.log(e)
        }
    }
}

getAds находится в другом файле экшен и выглядит следующим образом:

export default function getAds(userUrl){

return async dispatch => {
const response = await Axios.get(userUrl)

console.log(response.data)


dispatch(successGet(response.data.ads))
}

}

Подскажите, как правильно разрулить это?