How can I send multiple Props to Component in React with Material-UI Props-CodePudding

I have react component with MUI DrawerProps:

export default function Navigator(props: DrawerProps)

But i need two more props, e.g.

interface Props {
  items: string;
  onItemClick: (nr: number) => void;
}

So if i do smth like this:

export default function Navigator(props: DrawerProps, props2: Props)

I cant send my Props to component like this:

<Navigator
              PaperProps={{ style: { width: drawerWidth } }}
              variant="temporary"
              open={mobileOpen}
              onClose={handleDrawerToggle}
              onItemClick={handleSelectedId} //here problems
              items={selectedId.toString()}  //here problems
            />

Now i make this:

interface Props extends DrawerProps {
  items: string;
  onItemClick: (nr: number) => void;
}

And its working but i have warning in console:

*react-dom.development.js:86 Warning: Unknown event handler property `onItemClick`. It will be ignored.*
    at div
    at http://localhost:3000/static/js/bundle.js:2866:66 .........

Do you have any idea how can I pass it?? Thank You. Greetings!

CodePudding user response：

export default functionNavigator(props: DrawerProps & Props)

makes props an extension of DrawerProps. Now, items and onItemClick are expected in the props you call Navigator with.