add submenu to existing

Question

I have a navigation that is supposed to work in such a way that if an item from the main category has sub-items, then after clicking on the button, sub-categories will appear under it. I have an interface for this.

Interface:

export interface SidebarNavItem {
  label: string;
  url: string;
  icon: IconType;
  subItems?: Array<{
    label: string;
    url: string;
  }>;
}

navigation

        {sidebarNavItems.map(({ url, label, icon: Icon }, i) => (
          <Link href={url} key={i} passHref>
            <span
              className={mergeClasses(
                'flex items-center text-xs font-bold text-grey-700 px-4 py-6 transition-colors duration-200 hover:text-grey-600 cursor-pointer',
                router.pathname == url
                  ? 'text-primary-500 border-r-4 border-primary-500 hover:text-primary-500'
                  : '',
              )}
              style={{
                background:
                  router.pathname == url
                    ? 'linear-gradient(90deg, rgba(2,0,36,0) 0%, rgba(9,9,121,0) 80%, rgba(50,6,240,0.1) 100%)'
                    : 'white',
              }}
            >
              <Icon className="h-4 mr-4" />
              {label}
            </span>
          </Link>
        ))}
      </ul>