SwipeableSidebar sidebarId props Warning React Typescript

[arelaxend]

Dear Mui-treasury contributors,

What is the problem ? There is a warning while using SwipeableSidebar with Tyepscript:

Warning: React does not recognize the `sidebarId` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `sidebarid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in div (created by ForwardRef(Drawer))
    in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))
    in WithStyles(ForwardRef(Drawer)) (created by ForwardRef(SwipeableDrawer))
    in ForwardRef(SwipeableDrawer) (created by ProxyComponent)
    in ProxyComponent (created by ForwardRef(StyledComponent))
    in ForwardRef(StyledComponent) (created by PersistentSwipeableSidebar)
    in PersistentSwipeableSidebar (created by Context.Consumer)
    in SidebarProvider (created by SwipeableSidebar)

How to reproduce ?

1. CRA with typescript
2. Use swipeableSidebar for e.g.

       <SwipeableSidebar
         PaperProps={{ className: classes.sidebar }}
         sidebarId="desktopsidebar"
       >
         <Sidebar navConfig={navConfig} />
       </SwipeableSidebar>

3. Warning shows up.

Best.

[siriwatknp]

Hi, this should be a quick fix to not pass sidebarId to DOM.

[jordiyapz]

This also happens when I use Vite with typescript.

@siriwatknp I don't get it. Please show us what changes are necessary to fix that. Thanks.