Toogle компонентный класс после тайм-аута REACT

Я хочу удалить класс компонента по прошествии определенного времени в реакции.

вот мой код:

function Slide ({active}) {
const[slideClass, setSlideClass] = useState('slide')

if (active){
    setSlideClass('slide active')
}

  useEffect(() => {
    if (slideClass === 'slide active'){       
        const toggleClass = setTimeout(() => setSlideClass('slide'), 10000)

        return () => {
            clearTimeout(toggleClass)
        };
    }
}, [slideClass]); 

return(
    <div className = {slideClass} />
)

но, похоже, это не работает. Я получаю сообщение об ошибке «Слишком много повторных отрисовок. React ограничивает количество отрисовок, чтобы предотвратить бесконечный цикл». Что мне не хватает? Кажется, что активная опора работает правильно.

РЕДАКТИРОВАТЬ :

Я изменил useEffect, и теперь он хорошо работает, начиная с чистки. Если я возвращаю clearTImeout в useEffect, он не работает, как если бы setTimeout был удален перед запуском. Если я не сброшу тайм-аут, если возникнут проблемы при размонтировании компонента:

useEffect(() => {
    if (active){ 
        setSlideClass('slide active')
        const toggleClass =  setTimeout(() => {setSlideClass('slide')}, 8800)  

        return () => {
            clearTimeout(toggleClass)  
    }
}, [active]);