React hide or show specific sidebar element

I'm developing a react app where i have a list composed of elements (sidebar). In it there are two components that can be displayed, either an expandable or non-expandable sidebar item.

<List>
                {modules.map(module => (
                    <Fragment key={module.key}>
                        {module.section && <SidebarSection title={module.section()} />}
                            {module.subModules?.length ? (
                                <ExpandableSidebarItem
                                title={module.title()}
                                collapsed={module.collapsed ?? false}
                                onExpand={() => module.collapsed ? dispatch(expandModule(module.key)) : dispatch(collapseModule(module.key))}
                                son={module.subModules.map(subModule => getSideBarItemFromModule(subModule))} />
                                ) : (
                                    <SidebarItem
                                    title={module.title()}
                                    href={module.path}
                                    selected={module.key === selectedKey}
                                    onListItemClick={() => dispatch(openView(getViewFromModule(module)))} />
                                    )}
                    </Fragment>
                ))}
            </List>

I have an object which contains the name of the permitted elements to be dispayed to the user. I want to know how can I filter each element according to that object

export interface SidebarItemProps {
    title: string;
    href: string;
    selected?: boolean;
    onListItemClick?: () => void;
}

export const SidebarItem = (props: SidebarItemProps) => {
    const classes = useStyles();
    const { title, href, selected, onListItemClick } = props;

    return (
        <>
            <RouterLink className={classes.link} to={href}>
                <ListItem button selected={selected} onClick={onListItemClick}>
                    <ListItemText primary={title} />
                </ListItem>
            </RouterLink>
        </>
    );
};

export interface ExpandableSidebarItemProps {
    title: string;
    icon?: ReactNode;
    collapsed: boolean;
    onExpand?: () => void;
    son?: SidebarItemProps[];
}

export const ExpandableSidebarItem = (props: ExpandableSidebarItemProps) => {
    const classes = useStyles();
    const { title, icon, son, collapsed, onExpand } = props;

    return (
        < >
            <ListItem button onClick={onExpand}>
                {icon && <ListItemIcon>{icon}</ListItemIcon>}
                <ListItemText primary={title} />
                {collapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}
            </ListItem>
            <Collapse in={!collapsed}>
                <List>
                    {son.map((c, index) => (
                        
                        <RouterLink key={index} className={classes.link} to={c.href}>
                            <ListItem
                                className={classes.nestedItem}
                                button
                                selected={c.selected}
                                onClick={c.onListItemClick}>
                                <ListItemText primary={c.title} />
                            </ListItem>
                        </RouterLink>
                    ))}
                </List>
            </Collapse>
        </>
    );
};

I've tried adding a boolean to the module, which is just an object I created for defining the items but it will display every element when i try to create the condition. Every advice is appreciated.