Algolia hierarchical Menu issue

I have been using Algolia for React and I am having issues with its hierarchical Menu. When I select the third level of category from the menu everything else disappears from the screen and only the category and its parent category remains there.

Before clicking on the third level category

After clicking on the third level category. ( All other categories are gone )

This is my code for getting the categories and showing them on screen.

const HierarchicalMenu = ({ items, refine, createURL }) => {
const classes = useStyles();
console.log(items);
return (
    <ul style={{ marginBottom: 0, paddingLeft: 20, marginLeft: 0 }}>
        {items.map((item) => {
            console.log(item.label);
            console.log(item?.items ?? []);
            return (
                <li className={classes.categoryTitle} key={item.label}>
                    <a
                        href={createURL(item.value)}
                        className={cx(classes.categoryItem, item.isRefined ? 'selected' : null)}
                        onClick={(event) => {
                            event.preventDefault();
                            refine(item.value);
                        }}
                    >
                        {item.isRefined && item.items && <ArrowDropUpIcon />}
                        {!item.isRefined && <ArrowDropDownIcon />}
                        {item.label} <span>({item.count})</span>
                    </a>
                    {item.items && (
                        <HierarchicalMenu items={item.items} refine={refine} createURL={createURL} />
                    )}
                </li>
            );
        })}
    </ul>
);
};

const CustomHierarchicalMenu = connectHierarchicalMenu(HierarchicalMenu);



const CategoryFilter = () => {

return (
<CustomHierarchicalMenu attributes={['categories.lvl0', 'categories.lvl1', 'categories.lvl2']} />
  )

  }

This is how I have created the categories node in Alglolia