Удаление элементов из state по таймеру

Идея такая: есть локальный state (hook), в нем массив из четырех элементов. На экране есть кнопка добавления нового элемента в этот массив. При загрузке компонента в useEffect вызывается метод, который каждые 5 секунд удаляет первый элемент из стэйта. Если не трогать кнопку, которая добавляет новый элемент в стэйт, то все работает замечательно. Но если начать добавлять элементы, то удаление срабатывает по предыдущему стэйту, только потом отображается стэйт с новым элементом. Подскажите, как это исправить, чтоб все работало стабильно. Я понимаю, что нужно искать в направлении жизненного цикла, происходит конфликт состояний, но решения найти не могу.

const Component = () => {
    const [arr, setArr] = useState(['one', 'two', 'three', 'four']);
    React.useEffect(() => {
        console.log("render");
        setTimeout(deleteElementFromArr, 5000)
    });
    const addNewElementToArr = () => {
        let temp = arr.slice();
        temp.push('newElement');
        setArr(temp);
    };
    const deleteElementFromArr = () => {
        if (arr.length > 0) {
            console.log(arr);
            let temp = arr.slice();
            temp.splice(0, 1);
            setArr(temp)
        }
    };
    return (<div>
        <div>
            <Button onClick={addNewElementToArr}>add</Button>
        </div>
        <div style={{margiTop: '10px'}}>
            {arr.map(a => `${a} `)}
        </div>
    </div>)
};

https://codepen.io/slava4ka/pen/WNNvrPV