Смена состояния при регулярном обновлении данных через API

Доброго времени суток.

Мне необходимо сменить состояние кнопки по клику. Состояние этой кнопки (а так же другие данные) я получаю по API раз в секунду. Сейчас я реализовал так, что при нажатии на кнопку я меняю состояние на сервере, а отображаю смену состояния - как только получу новые измененные данные.

const [isLight, setIsLight] = useState(false)

...

function clickLight(e) {
        await axios.post(SET_IS_ON_LIGHT + !isLight)
    }

Я бы хотел отображать смену состояния моментально по клику, а не ждать пока придут обновленные данные. Но если я сделаю так:

const [isLight, setIsLight] = useState(false)

...

function clickLight(e) {
        await axios.post(SET_IS_ON_LIGHT + !isLight)
         .then(() => setIsLight(prev => !prev))
    }

то смена состояния будет не корректной. Предположим состояние моей кнопки "off", по нажатию произойдет следущее:

1. Моментальная смена состояния после отправки данных ("off->on")
2. Ещё не изменившиеся данные (старые) придут мне по API и произойдет устновка старого положения кнопки ("on"->"off")
3. Уже в следущую секунду данные обновятся и мне придут корректные данные. ("off"->"on")

Получается что состояние моей кнопки может переключится 3 раза.

Буду рад если подскажете правильный способ решения данной проблемы =)