How do we add Multiple onclick event in react.js

I came across one scenario that the onclick button is already been used

but at the same time i need to add one more event to to add history.push(),

I was working on sidebar component using material UI

so need to customize few things I added the code

 const menuItems = [
 {
 text: 'Home',
 icon: HomeIcon,
 onClick: () => history.push("/"),
 },
 {
 text: 'Log In',
 icon: MailIcon,
 onClick: () => history.push("/login"),
 },
 {
 text: 'Sign Up',
 icon: HomeIcon,
 onClick: () => history.push("/signup"),
 },
 ];

 ...

<List>
{menuItems.map(({ text, icon: Icon, onClick}, index) => (
<ListItem
 button
 onClick={
 item === menus[2]
 ? handleSubMenu1Click
 : handleSubMenu2Click
  }
 >
  <ListItemIcon>
    <Icon />
  </ListItemIcon>
  <ListItemText primary={text} />
</ListItem>
))}
</List>

I tried something Like this

const menuItems = [
{
text: 'Home',
icon: HomeIcon,
to: "/",
},
{
text: 'Log In',
icon: MailIcon,
to:"/login",
},


<ListItem element={Link} to={item.to} button key={text}>

If we have submenu and also need to navigate across what would be the best Approach

Use Event Bubbling to attach a single onClick handler to your <List> component instead of attaching multiple handlers to each <ListItem> as described here https://blog.logrocket.com/event-bubbling-capturing-react/.

In your handler function, you'll get a SyntheticEvent object whose target property will contain a reference to the clicked item, which you can use to determine what actions to take next.

See this sandbox: https://codesandbox.io/s/snowy-sea-998zvl?file=/src/App.js

However, from your code I infer you're just trying to create a navigation menu with links, and for that, you may just want to use react-router-dom's <Link> component instead as shown in this sandbox: https://codesandbox.io/s/exciting-diffie-putb4f?file=/src/Nav.js