Below the [Switch API props table] you'll find

Any other props supplied will be provided to the root element (IconButton).

which means that you're not preventing the default behavior of the click event on <input /> but <IconButton />.

However, it doesn't seem like you can do this at the moment. Passing onClick to inputProps works only after the first state change: https://codesandbox.io/s/switch-click-prevent-default-tutkj

Should we solve the issue like this?

diff --git a/packages/material-ui/src/internal/SwitchBase.js b/packages/material-ui/src/internal/SwitchBase.js
index 3db2a57393..009679bf56 100644
--- a/packages/material-ui/src/internal/SwitchBase.js
+++ b/packages/material-ui/src/internal/SwitchBase.js
@@ -84,6 +84,10 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) {
   };

   const handleInputChange = (event) => {
+    if (event.nativeEvent.defaultPrevented) {
+      return;
+    }
+
     const newChecked = event.target.checked;

     setCheckedState(newChecked);

Looks like a small change. If no one is working on it, then I can do it. This will be my first contribution.
As far as my understanding, when you pass
onClick={(event)=>{event.preventDefault();}}
the state will change from checked to uncheck, but we don't want that right?

@satyadeeproat this sounds accurate. The objective is to reproduce the behavior of a native input checkbox. We will need to add a test case for it.

Ok. let me do it. Will add a test case too.

Now that I look at this issue without Material-UI: This looks like a React bug to me. We should still get this fix in but I'm also opening a React issue to get some clarification.

Edit: Already reported: facebook/react#9023