Sidebar component - Nested <main> elements when using <SidebarInset>?

[chuygil]

The <SidebarInset> component is defined as follows (notice the main element):

const SidebarInset = React.forwardRef<
    HTMLDivElement,
    React.ComponentProps<'main'>
>(({ className, ...props }, ref) => {
    return (
        <main
            ref={ref}
            className={cn(
                'relative flex min-h-svh flex-1 flex-col bg-background',
                'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
                className,
            )}
            {...props}
        />
    );
});

In the Sidebar docs, under Sidebar > variant, you can see the <main> element wrapped with <SidebarInset>, meaning there will be 2 nested <main> elements per page.

This violates HTML spec and needs to be updated from:

<SidebarProvider>
  <Sidebar variant="inset" />
  <SidebarInset>
    <main>{children}</main>
  </SidebarInset>
</SidebarProvider>

To:

<SidebarProvider>
  <Sidebar variant="inset" />
  <SidebarInset>{children}</SidebarInset>
</SidebarProvider>

Correct?