I’m trying to fetch roles and render some elements of the pages based on the roles of the user who logged in, but it works once; just after the webpack is compiled. Whenever I reload or log out login. The element should be rendered disappeared. I tried to set a 500ms delay before fetching roles, but you know it’s clunky. Can anyone help me with this?

The code:

import React, { useState, useEffect } from 'react';
import { Layout, Menu, ConfigProvider, theme } from 'antd';
import Cookies from 'js-cookie';
import { auth, db } from '../firebaseConfig'; 
import { LogoutOutlined } from '@ant-design/icons';
import Experts from '../components/History';
import Homepage from '../components/Experts';
import AddOperation from '../components/AddOperation';
import '../style.css';
import BottomNavigation from '../components/BottomNavigation';
import { doc, getDoc } from 'firebase/firestore';

const { Header, Content, Footer } = Layout;

const Home: React.FC = () => {
    const [selectedMenuItem, setSelectedMenuItem] = useState(1);
    const [userRoles, setUserRoles] = useState<string[]>([]);

    useEffect(() => {
        const fetchUserRoles = async () => {
            const userId = auth.currentUser?.uid;
            if (!userId) return; 
    
            try {
                const userDocRef = doc(db, `/users/${userId}`);
                const userDoc = await getDoc(userDocRef);
                if (userDoc.exists()) {
                    const roles: string[] = userDoc.data().roles || [];
                    setUserRoles(roles);
                }
            } catch (err) {
                console.error(err);
            }
        };
    
        const timer = setTimeout(() => {
            fetchUserRoles();
        }, 500);
    
        return () => clearTimeout(timer);
    }, []);

    const handleLogout = () => {
        Cookies.remove('loggedIn');
        window.location.reload();
    };


    const darkMode = document.body.classList.contains("dark");

    return (
        <ConfigProvider
            theme={{
                ...theme,
                algorithm: darkMode === true
                    ? [theme.darkAlgorithm]
                    : [theme.defaultAlgorithm],
                components: {
                    Layout: {
                        headerBg: darkMode === true ? '#001529' : '#f5f5f5',
                    },
                    Menu: {
                        darkItemBg: darkMode === true ? '#001529' : '#f5f5f5',
                        itemBg: darkMode === true ? '#001529' : '#f5f5f5',
                    }
                }
            }}
        >
        <Layout style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
            <Header style={{padding: '0 150px'}} className='desktop-element'>
                <Menu mode="horizontal" defaultSelectedKeys={['1']}>
                    <Menu.Item key="1" onClick={() => setSelectedMenuItem(1)}>item1</Menu.Item>
                    <Menu.Item key="2" onClick={() => setSelectedMenuItem(2)}>item2</Menu.Item>
                    <Menu.Item key="3" onClick={() => setSelectedMenuItem(3)}>item3</Menu.Item>
                    <Menu.Item key="4" onClick={() => setSelectedMenuItem(4)}>item4</Menu.Item>
                    {userRoles.includes('admin') && <Menu.Item key="5">Admin item</Menu.Item>}
                    {userRoles.includes('moderator') && !userRoles.includes('admin') && <Menu.Item key="5">Moderator item</Menu.Item>}
                    <Menu.Item onClick={handleLogout} style={{ marginLeft: 'auto', background: 'red', borderColor: 'red', color: 'white' }}>
                        <LogoutOutlined />
                    </Menu.Item>
                </Menu>
            </Header>
            <Content className='homecontent' style={{flexGrow: 1 }}>
                <div className="site-layout-content">
                    {selectedMenuItem === 1 && <Homepage />}
                    {selectedMenuItem === 4 && <Experts />}
                    {selectedMenuItem === 2 && <AddOperation/>}
                </div>
            </Content>
            <Footer style={{ textAlign: 'center' }}>footer</Footer>
            <div className="mobile-element" ><BottomNavigation setSelectedMenuItem={setSelectedMenuItem} handleLogout={handleLogout} /></div>
        </Layout>
        </ConfigProvider>
    ); 
};

export default Home;