Как анимировать исчезновение react preloader

возникла проблема, когда я делал искусственный прелоадер на сайте. Мне нужно чтобы через какое-то время он плавно скрывался, но я не могу понять как сделать плавное исчезновение компонента в React. Я создал класс .closed, там opacity: 0, но это не помогло. Код ниже, спасибо за помощь!

const App = () => {
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        setTimeout(() => {
            setLoading(false);
        }, 5000);
    });

    const content = loading ? <Preloader/> : <h1>Hello world!</h1>

    return (
        <div className='app'>
            {content}
        </div>
    );
}