BottomNavigationAction component types conflict

[tudi2d]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When creating a BottomNavigationAction using a Link as a component & an onChange function prop it will trigger a No overload matches this call type error, even though this is a valid behaviour (& works just fine).

Expected Behavior 🤔

The types of BottomNavigationAction should reflect the allowed behaviour.

Steps to Reproduce 🕹

https://codesandbox.io/s/bottomnavigationaction-issue-g6txi?file=/CustomAction.tsx:408-438

Context 🔦

I want to listen to the change event on a BottomNavigationAction component, which is rendered as a Link

Your Environment 🌎

`npx @material-ui/envinfo`

Summary of the result:

System:
OS: macOS 11.5.1
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Memory: 21.36 MB / 16.00 GB
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
Yarn: 1.22.1 - ~/.nvm/versions/node/v12.22.1/bin/yarn
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
Browsers:
Chrome: 92.0.4515.159
Monorepos:
Yarn Workspaces: 1.22.1
Lerna: 4.0.0

[arpitdalal]

I am also facing the same issue with using NavLink or Link component coming from react-router-dom, BottomNavigationAction doesn't like ref of HTMLAnchorElement? Please see the line 38 in this codesandbox file
Am I doing something wrong here?

[arpitdalal]

Hey @eps1lon!
Do you know why this is the case and how to get around it?