diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js
index 0423018486cff4..14948b92e5f636 100644
--- a/docs/src/pages/components/checkboxes/CheckboxLabels.js
+++ b/docs/src/pages/components/checkboxes/CheckboxLabels.js
@@ -28,13 +28,13 @@ export default function CheckboxLabels() {
   });
 
   const handleChange = event => {
-    setState({ ...state, [event.target.value]: event.target.checked });
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
     <FormGroup row>
       <FormControlLabel
-        control={<Checkbox checked={state.checkedA} onChange={handleChange} value="checkedA" />}
+        control={<Checkbox checked={state.checkedA} onChange={handleChange} name="checkedA" />}
         label="Secondary"
       />
       <FormControlLabel
@@ -42,34 +42,32 @@ export default function CheckboxLabels() {
           <Checkbox
             checked={state.checkedB}
             onChange={handleChange}
-            value="checkedB"
+            name="checkedB"
             color="primary"
           />
         }
         label="Primary"
       />
-      <FormControlLabel control={<Checkbox value="checkedC" />} label="Uncontrolled" />
-      <FormControlLabel disabled control={<Checkbox value="checkedD" />} label="Disabled" />
-      <FormControlLabel disabled control={<Checkbox checked value="checkedE" />} label="Disabled" />
+      <FormControlLabel control={<Checkbox name="checkedC" />} label="Uncontrolled" />
+      <FormControlLabel disabled control={<Checkbox name="checkedD" />} label="Disabled" />
+      <FormControlLabel disabled control={<Checkbox checked name="checkedE" />} label="Disabled" />
       <FormControlLabel
         control={
           <Checkbox
             checked={state.checkedF}
             onChange={handleChange}
-            value="checkedF"
+            name="checkedF"
             indeterminate
           />
         }
         label="Indeterminate"
       />
       <FormControlLabel
-        control={
-          <GreenCheckbox checked={state.checkedG} onChange={handleChange} value="checkedG" />
-        }
+        control={<GreenCheckbox checked={state.checkedG} onChange={handleChange} name="checkedG" />}
         label="Custom color"
       />
       <FormControlLabel
-        control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} value="checkedH" />}
+        control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} name="checkedH" />}
         label="Custom icon"
       />
       <FormControlLabel
@@ -77,7 +75,7 @@ export default function CheckboxLabels() {
           <Checkbox
             icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
             checkedIcon={<CheckBoxIcon fontSize="small" />}
-            value="checkedI"
+            name="checkedI"
           />
         }
         label="Custom size"
diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
index a02de6ca69dec7..b0c48f0084b960 100644
--- a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
+++ b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
@@ -28,13 +28,13 @@ export default function CheckboxLabels() {
   });
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [event.target.value]: event.target.checked });
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
     <FormGroup row>
       <FormControlLabel
-        control={<Checkbox checked={state.checkedA} onChange={handleChange} value="checkedA" />}
+        control={<Checkbox checked={state.checkedA} onChange={handleChange} name="checkedA" />}
         label="Secondary"
       />
       <FormControlLabel
@@ -42,34 +42,32 @@ export default function CheckboxLabels() {
           <Checkbox
             checked={state.checkedB}
             onChange={handleChange}
-            value="checkedB"
+            name="checkedB"
             color="primary"
           />
         }
         label="Primary"
       />
-      <FormControlLabel control={<Checkbox value="checkedC" />} label="Uncontrolled" />
-      <FormControlLabel disabled control={<Checkbox value="checkedD" />} label="Disabled" />
-      <FormControlLabel disabled control={<Checkbox checked value="checkedE" />} label="Disabled" />
+      <FormControlLabel control={<Checkbox name="checkedC" />} label="Uncontrolled" />
+      <FormControlLabel disabled control={<Checkbox name="checkedD" />} label="Disabled" />
+      <FormControlLabel disabled control={<Checkbox checked name="checkedE" />} label="Disabled" />
       <FormControlLabel
         control={
           <Checkbox
             checked={state.checkedF}
             onChange={handleChange}
-            value="checkedF"
+            name="checkedF"
             indeterminate
           />
         }
         label="Indeterminate"
       />
       <FormControlLabel
-        control={
-          <GreenCheckbox checked={state.checkedG} onChange={handleChange} value="checkedG" />
-        }
+        control={<GreenCheckbox checked={state.checkedG} onChange={handleChange} name="checkedG" />}
         label="Custom color"
       />
       <FormControlLabel
-        control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} value="checkedH" />}
+        control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} name="checkedH" />}
         label="Custom icon"
       />
       <FormControlLabel
@@ -77,7 +75,7 @@ export default function CheckboxLabels() {
           <Checkbox
             icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
             checkedIcon={<CheckBoxIcon fontSize="small" />}
-            value="checkedI"
+            name="checkedI"
           />
         }
         label="Custom size"
diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js
index b7a6e4131526a2..a8cfae91babe2e 100644
--- a/docs/src/pages/components/checkboxes/Checkboxes.js
+++ b/docs/src/pages/components/checkboxes/Checkboxes.js
@@ -13,39 +13,29 @@ export default function Checkboxes() {
       <Checkbox
         checked={checked}
         onChange={handleChange}
-        value="primary"
         inputProps={{ 'aria-label': 'primary checkbox' }}
       />
       <Checkbox
         defaultChecked
-        value="secondary"
         color="primary"
         inputProps={{ 'aria-label': 'secondary checkbox' }}
       />
-      <Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
-      <Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
-      <Checkbox
-        disabled
-        checked
-        value="disabled checked"
-        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
-      />
+      <Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
+      <Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
+      <Checkbox disabled checked inputProps={{ 'aria-label': 'disabled checked checkbox' }} />
       <Checkbox
         defaultChecked
-        value="indeterminate"
         indeterminate
         inputProps={{ 'aria-label': 'indeterminate checkbox' }}
       />
       <Checkbox
         defaultChecked
         color="default"
-        value="default"
         inputProps={{ 'aria-label': 'checkbox with default color' }}
       />
       <Checkbox
         defaultChecked
         size="small"
-        value="small"
         inputProps={{ 'aria-label': 'checkbox with small size' }}
       />
     </div>
diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx
index 0de890e3692e23..25019084982f21 100644
--- a/docs/src/pages/components/checkboxes/Checkboxes.tsx
+++ b/docs/src/pages/components/checkboxes/Checkboxes.tsx
@@ -13,39 +13,29 @@ export default function Checkboxes() {
       <Checkbox
         checked={checked}
         onChange={handleChange}
-        value="primary"
         inputProps={{ 'aria-label': 'primary checkbox' }}
       />
       <Checkbox
         defaultChecked
-        value="secondary"
         color="primary"
         inputProps={{ 'aria-label': 'secondary checkbox' }}
       />
-      <Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
-      <Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
-      <Checkbox
-        disabled
-        checked
-        value="disabled checked"
-        inputProps={{ 'aria-label': 'disabled checked checkbox' }}
-      />
+      <Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
+      <Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
+      <Checkbox disabled checked inputProps={{ 'aria-label': 'disabled checked checkbox' }} />
       <Checkbox
         defaultChecked
-        value="indeterminate"
         indeterminate
         inputProps={{ 'aria-label': 'indeterminate checkbox' }}
       />
       <Checkbox
         defaultChecked
         color="default"
-        value="default"
         inputProps={{ 'aria-label': 'checkbox with default color' }}
       />
       <Checkbox
         defaultChecked
         size="small"
-        value="small"
         inputProps={{ 'aria-label': 'checkbox with small size' }}
       />
     </div>
diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.js b/docs/src/pages/components/checkboxes/CheckboxesGroup.js
index 2e07130f10d1a0..3d5368fd27634f 100644
--- a/docs/src/pages/components/checkboxes/CheckboxesGroup.js
+++ b/docs/src/pages/components/checkboxes/CheckboxesGroup.js
@@ -25,7 +25,7 @@ export default function CheckboxesGroup() {
   });
 
   const handleChange = event => {
-    setState({ ...state, [event.target.value]: event.target.checked });
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   const { gilad, jason, antoine } = state;
@@ -37,15 +37,15 @@ export default function CheckboxesGroup() {
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
-            control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
+            control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
             label="Gilad Gray"
           />
           <FormControlLabel
-            control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
+            control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
             label="Jason Killian"
           />
           <FormControlLabel
-            control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
+            control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
             label="Antoine Llorca"
           />
         </FormGroup>
@@ -55,15 +55,15 @@ export default function CheckboxesGroup() {
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
-            control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
+            control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
             label="Gilad Gray"
           />
           <FormControlLabel
-            control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
+            control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
             label="Jason Killian"
           />
           <FormControlLabel
-            control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
+            control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
             label="Antoine Llorca"
           />
         </FormGroup>
diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
index 8ec0ac757d6443..fe0c30c7a67856 100644
--- a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
+++ b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
@@ -27,7 +27,7 @@ export default function CheckboxesGroup() {
   });
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [event.target.value]: event.target.checked });
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   const { gilad, jason, antoine } = state;
@@ -39,15 +39,15 @@ export default function CheckboxesGroup() {
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
-            control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
+            control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
             label="Gilad Gray"
           />
           <FormControlLabel
-            control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
+            control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
             label="Jason Killian"
           />
           <FormControlLabel
-            control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
+            control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
             label="Antoine Llorca"
           />
         </FormGroup>
@@ -57,15 +57,15 @@ export default function CheckboxesGroup() {
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel
-            control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
+            control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
             label="Gilad Gray"
           />
           <FormControlLabel
-            control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
+            control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
             label="Jason Killian"
           />
           <FormControlLabel
-            control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
+            control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
             label="Antoine Llorca"
           />
         </FormGroup>
diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
index 67dc398c3e532b..cada0448448fb6 100644
--- a/docs/src/pages/components/chips/ChipsPlayground.js
+++ b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -33,11 +33,10 @@ function ChipsPlayground(props) {
     size: 'medium',
   });
 
-  const handleChange = key => event => {
-    const value = event.target.value;
+  const handleChange = event => {
     setState(state => ({
       ...state,
-      [key]: value,
+      [event.target.name]: event.target.value,
     }));
   };
 
@@ -131,7 +130,7 @@ function ChipsPlayground(props) {
                 name="variant"
                 aria-label="variant"
                 value={variant}
-                onChange={handleChange('variant')}
+                onChange={handleChange}
               >
                 <FormControlLabel value="default" control={<Radio />} label="default" />
                 <FormControlLabel value="outlined" control={<Radio />} label="outlined" />
@@ -141,13 +140,7 @@ function ChipsPlayground(props) {
           <Grid item xs={12} md={6}>
             <FormControl component="fieldset">
               <FormLabel>color</FormLabel>
-              <RadioGroup
-                row
-                name="color"
-                aria-label="color"
-                value={color}
-                onChange={handleChange('color')}
-              >
+              <RadioGroup row name="color" aria-label="color" value={color} onChange={handleChange}>
                 <FormControlLabel value="default" control={<Radio />} label="default" />
                 <FormControlLabel value="primary" control={<Radio />} label="primary" />
                 <FormControlLabel value="secondary" control={<Radio />} label="secondary" />
@@ -157,13 +150,7 @@ function ChipsPlayground(props) {
           <Grid item xs={12} md={6}>
             <FormControl component="fieldset">
               <FormLabel>size</FormLabel>
-              <RadioGroup
-                row
-                name="sizet"
-                aria-label="size"
-                value={size}
-                onChange={handleChange('size')}
-              >
+              <RadioGroup row name="size" aria-label="size" value={size} onChange={handleChange}>
                 <FormControlLabel value="medium" control={<Radio />} label="medium" />
                 <FormControlLabel value="small" control={<Radio />} label="small" />
               </RadioGroup>
@@ -172,13 +159,7 @@ function ChipsPlayground(props) {
           <Grid item xs={12} md={6}>
             <FormControl component="fieldset">
               <FormLabel>icon</FormLabel>
-              <RadioGroup
-                row
-                name="icon"
-                aria-label="icon"
-                value={icon}
-                onChange={handleChange('icon')}
-              >
+              <RadioGroup row name="icon" aria-label="icon" value={icon} onChange={handleChange}>
                 <FormControlLabel value="none" control={<Radio />} label="none" />
                 <FormControlLabel value="icon" control={<Radio />} label="icon" />
               </RadioGroup>
@@ -192,7 +173,7 @@ function ChipsPlayground(props) {
                 name="avatar"
                 aria-label="avatar"
                 value={avatar}
-                onChange={handleChange('avatar')}
+                onChange={handleChange}
               >
                 <FormControlLabel value="none" control={<Radio />} label="none" />
                 <FormControlLabel value="letter" control={<Radio />} label="letter" />
@@ -208,7 +189,7 @@ function ChipsPlayground(props) {
                 name="onDelete"
                 aria-label="on delete"
                 value={onDelete}
-                onChange={handleChange('onDelete')}
+                onChange={handleChange}
               >
                 <FormControlLabel value="none" control={<Radio />} label="none" />
                 <FormControlLabel value="default" control={<Radio />} label="default" />
diff --git a/docs/src/pages/components/dialogs/MaxWidthDialog.js b/docs/src/pages/components/dialogs/MaxWidthDialog.js
index c7230a0a238204..11f437339d04b7 100644
--- a/docs/src/pages/components/dialogs/MaxWidthDialog.js
+++ b/docs/src/pages/components/dialogs/MaxWidthDialog.js
@@ -90,9 +90,7 @@ export default function MaxWidthDialog() {
             </FormControl>
             <FormControlLabel
               className={classes.formControlLabel}
-              control={
-                <Switch checked={fullWidth} onChange={handleFullWidthChange} value="fullWidth" />
-              }
+              control={<Switch checked={fullWidth} onChange={handleFullWidthChange} />}
               label="Full width"
             />
           </form>
diff --git a/docs/src/pages/components/dialogs/MaxWidthDialog.tsx b/docs/src/pages/components/dialogs/MaxWidthDialog.tsx
index 67809679b9bf49..d53de6dd0c4e75 100644
--- a/docs/src/pages/components/dialogs/MaxWidthDialog.tsx
+++ b/docs/src/pages/components/dialogs/MaxWidthDialog.tsx
@@ -92,9 +92,7 @@ export default function MaxWidthDialog() {
             </FormControl>
             <FormControlLabel
               className={classes.formControlLabel}
-              control={
-                <Switch checked={fullWidth} onChange={handleFullWidthChange} value="fullWidth" />
-              }
+              control={<Switch checked={fullWidth} onChange={handleFullWidthChange} />}
               label="Full width"
             />
           </form>
diff --git a/docs/src/pages/components/lists/InteractiveList.js b/docs/src/pages/components/lists/InteractiveList.js
index d2444ed3082c51..c0addef06c1c66 100644
--- a/docs/src/pages/components/lists/InteractiveList.js
+++ b/docs/src/pages/components/lists/InteractiveList.js
@@ -46,22 +46,12 @@ export default function InteractiveList() {
     <div className={classes.root}>
       <FormGroup row>
         <FormControlLabel
-          control={
-            <Checkbox
-              checked={dense}
-              onChange={event => setDense(event.target.checked)}
-              value="dense"
-            />
-          }
+          control={<Checkbox checked={dense} onChange={event => setDense(event.target.checked)} />}
           label="Enable dense"
         />
         <FormControlLabel
           control={
-            <Checkbox
-              checked={secondary}
-              onChange={event => setSecondary(event.target.checked)}
-              value="secondary"
-            />
+            <Checkbox checked={secondary} onChange={event => setSecondary(event.target.checked)} />
           }
           label="Enable secondary text"
         />
diff --git a/docs/src/pages/components/lists/InteractiveList.tsx b/docs/src/pages/components/lists/InteractiveList.tsx
index 598d98aa5f9d0d..eb8967592164ab 100644
--- a/docs/src/pages/components/lists/InteractiveList.tsx
+++ b/docs/src/pages/components/lists/InteractiveList.tsx
@@ -48,22 +48,12 @@ export default function InteractiveList() {
     <div className={classes.root}>
       <FormGroup row>
         <FormControlLabel
-          control={
-            <Checkbox
-              checked={dense}
-              onChange={event => setDense(event.target.checked)}
-              value="dense"
-            />
-          }
+          control={<Checkbox checked={dense} onChange={event => setDense(event.target.checked)} />}
           label="Enable dense"
         />
         <FormControlLabel
           control={
-            <Checkbox
-              checked={secondary}
-              onChange={event => setSecondary(event.target.checked)}
-              value="secondary"
-            />
+            <Checkbox checked={secondary} onChange={event => setSecondary(event.target.checked)} />
           }
           label="Enable secondary text"
         />
diff --git a/docs/src/pages/components/popover/AnchorPlayground.js b/docs/src/pages/components/popover/AnchorPlayground.js
index e92d9794515097..d29b01ea0083b7 100644
--- a/docs/src/pages/components/popover/AnchorPlayground.js
+++ b/docs/src/pages/components/popover/AnchorPlayground.js
@@ -91,19 +91,17 @@ function AnchorPlayground(props) {
     anchorReference: 'anchorEl',
   });
 
-  const handleChange = key => event => {
-    const value = event.target.value;
+  const handleChange = event => {
     setState(state => ({
       ...state,
-      [key]: value,
+      [event.target.name]: event.target.value,
     }));
   };
 
   const handleNumberInputChange = key => event => {
-    const value = event.target.value;
     setState(state => ({
       ...state,
-      [key]: parseInt(value, 10),
+      [key]: parseInt(event.target.value, 10),
     }));
   };
 
@@ -192,7 +190,7 @@ function AnchorPlayground(props) {
               aria-label="anchor reference"
               name="anchorReference"
               value={anchorReference}
-              onChange={handleChange('anchorReference')}
+              onChange={handleChange}
             >
               <FormControlLabel value="anchorEl" control={<Radio />} label="anchorEl" />
               <FormControlLabel value="anchorPosition" control={<Radio />} label="anchorPosition" />
@@ -227,7 +225,7 @@ function AnchorPlayground(props) {
               aria-label="anchor origin vertical"
               name="anchorOriginVertical"
               value={anchorOriginVertical}
-              onChange={handleChange('anchorOriginVertical')}
+              onChange={handleChange}
             >
               <FormControlLabel
                 value="top"
@@ -254,7 +252,7 @@ function AnchorPlayground(props) {
               aria-label="transform origin vertical"
               name="transformOriginVertical"
               value={transformOriginVertical}
-              onChange={handleChange('transformOriginVertical')}
+              onChange={handleChange}
             >
               <FormControlLabel value="top" control={<Radio color="primary" />} label="Top" />
               <FormControlLabel value="center" control={<Radio color="primary" />} label="Center" />
@@ -270,7 +268,7 @@ function AnchorPlayground(props) {
               aria-label="anchor origin horizontal"
               name="anchorOriginHorizontal"
               value={anchorOriginHorizontal}
-              onChange={handleChange('anchorOriginHorizontal')}
+              onChange={handleChange}
             >
               <FormControlLabel
                 value="left"
@@ -298,7 +296,7 @@ function AnchorPlayground(props) {
               aria-label="transform origin horizontal"
               name="transformOriginHorizontal"
               value={transformOriginHorizontal}
-              onChange={handleChange('transformOriginHorizontal')}
+              onChange={handleChange}
             >
               <FormControlLabel value="left" control={<Radio color="primary" />} label="Left" />
               <FormControlLabel value="center" control={<Radio color="primary" />} label="Center" />
diff --git a/docs/src/pages/components/selects/NativeSelects.js b/docs/src/pages/components/selects/NativeSelects.js
index d3945d59fe3056..4d3e935a6d5f06 100644
--- a/docs/src/pages/components/selects/NativeSelects.js
+++ b/docs/src/pages/components/selects/NativeSelects.js
@@ -23,7 +23,8 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const handleChange = name => event => {
+  const handleChange = event => {
+    const name = event.target.name;
     setState({
       ...state,
       [name]: event.target.value,
@@ -37,7 +38,7 @@ export default function NativeSelects() {
         <Select
           native
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{
             name: 'age',
             id: 'age-native-simple',
@@ -53,7 +54,7 @@ export default function NativeSelects() {
         <InputLabel htmlFor="age-native-helper">Age</InputLabel>
         <NativeSelect
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{
             name: 'age',
             id: 'age-native-helper',
@@ -69,7 +70,7 @@ export default function NativeSelects() {
       <FormControl className={classes.formControl}>
         <NativeSelect
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           name="age"
           className={classes.selectEmpty}
           inputProps={{ 'aria-label': 'age' }}
@@ -87,7 +88,7 @@ export default function NativeSelects() {
         </InputLabel>
         <NativeSelect
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{
             name: 'age',
             id: 'age-native-label-placeholder',
@@ -104,7 +105,7 @@ export default function NativeSelects() {
         <InputLabel htmlFor="name-native-disabled">Name</InputLabel>
         <NativeSelect
           value={state.name}
-          onChange={handleChange('name')}
+          onChange={handleChange}
           inputProps={{
             name: 'name',
             id: 'name-native-disabled',
@@ -125,7 +126,7 @@ export default function NativeSelects() {
         <InputLabel htmlFor="name-native-error">Name</InputLabel>
         <NativeSelect
           value={state.name}
-          onChange={handleChange('name')}
+          onChange={handleChange}
           name="name"
           inputProps={{
             id: 'name-native-error',
@@ -163,7 +164,7 @@ export default function NativeSelects() {
           className={classes.selectEmpty}
           value={state.age}
           name="age"
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{ 'aria-label': 'age' }}
         >
           <option value="" disabled>
@@ -180,7 +181,7 @@ export default function NativeSelects() {
         <Select
           native
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           name="age"
           inputProps={{
             id: 'age-native-required',
@@ -198,7 +199,7 @@ export default function NativeSelects() {
         <Select
           native
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           label="Age"
           inputProps={{
             name: 'age',
@@ -216,7 +217,7 @@ export default function NativeSelects() {
         <Select
           native
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{
             name: 'age',
             id: 'filled-age-native-simple',
diff --git a/docs/src/pages/components/selects/NativeSelects.tsx b/docs/src/pages/components/selects/NativeSelects.tsx
index 02652ae8d8df3d..136b7ba49e18e8 100644
--- a/docs/src/pages/components/selects/NativeSelects.tsx
+++ b/docs/src/pages/components/selects/NativeSelects.tsx
@@ -25,9 +25,8 @@ export default function NativeSelects() {
     name: 'hai',
   });
 
-  const handleChange = (name: keyof typeof state) => (
-    event: React.ChangeEvent<{ value: unknown }>,
-  ) => {
+  const handleChange = (event: React.ChangeEvent<{ name?: string; value: unknown }>) => {
+    const name = event.target.name as keyof typeof state;
     setState({
       ...state,
       [name]: event.target.value,
@@ -41,7 +40,7 @@ export default function NativeSelects() {
         <Select
           native
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{
             name: 'age',
             id: 'age-native-simple',
@@ -57,7 +56,7 @@ export default function NativeSelects() {
         <InputLabel htmlFor="age-native-helper">Age</InputLabel>
         <NativeSelect
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{
             name: 'age',
             id: 'age-native-helper',
@@ -73,7 +72,7 @@ export default function NativeSelects() {
       <FormControl className={classes.formControl}>
         <NativeSelect
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           name="age"
           className={classes.selectEmpty}
           inputProps={{ 'aria-label': 'age' }}
@@ -91,7 +90,7 @@ export default function NativeSelects() {
         </InputLabel>
         <NativeSelect
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{
             name: 'age',
             id: 'age-native-label-placeholder',
@@ -108,7 +107,7 @@ export default function NativeSelects() {
         <InputLabel htmlFor="name-native-disabled">Name</InputLabel>
         <NativeSelect
           value={state.name}
-          onChange={handleChange('name')}
+          onChange={handleChange}
           inputProps={{
             name: 'name',
             id: 'name-native-disabled',
@@ -129,7 +128,7 @@ export default function NativeSelects() {
         <InputLabel htmlFor="name-native-error">Name</InputLabel>
         <NativeSelect
           value={state.name}
-          onChange={handleChange('name')}
+          onChange={handleChange}
           name="name"
           inputProps={{
             id: 'name-native-error',
@@ -167,7 +166,7 @@ export default function NativeSelects() {
           className={classes.selectEmpty}
           value={state.age}
           name="age"
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{ 'aria-label': 'age' }}
         >
           <option value="" disabled>
@@ -184,7 +183,7 @@ export default function NativeSelects() {
         <Select
           native
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           name="age"
           inputProps={{
             id: 'age-native-required',
@@ -202,7 +201,7 @@ export default function NativeSelects() {
         <Select
           native
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           label="Age"
           inputProps={{
             name: 'age',
@@ -220,7 +219,7 @@ export default function NativeSelects() {
         <Select
           native
           value={state.age}
-          onChange={handleChange('age')}
+          onChange={handleChange}
           inputProps={{
             name: 'age',
             id: 'filled-age-native-simple',
diff --git a/docs/src/pages/components/speed-dial/SpeedDials.js b/docs/src/pages/components/speed-dial/SpeedDials.js
index e4648255421d3c..2cc16124121b3d 100644
--- a/docs/src/pages/components/speed-dial/SpeedDials.js
+++ b/docs/src/pages/components/speed-dial/SpeedDials.js
@@ -73,9 +73,7 @@ export default function SpeedDials() {
   return (
     <div className={classes.root}>
       <FormControlLabel
-        control={
-          <Switch checked={hidden} onChange={handleHiddenChange} value="hidden" color="primary" />
-        }
+        control={<Switch checked={hidden} onChange={handleHiddenChange} color="primary" />}
         label="Hidden"
       />
       <FormLabel className={classes.radioGroup} component="legend">
diff --git a/docs/src/pages/components/speed-dial/SpeedDials.tsx b/docs/src/pages/components/speed-dial/SpeedDials.tsx
index 2abd8ea5ea65ae..06c584fc0a04e0 100644
--- a/docs/src/pages/components/speed-dial/SpeedDials.tsx
+++ b/docs/src/pages/components/speed-dial/SpeedDials.tsx
@@ -75,9 +75,7 @@ export default function SpeedDials() {
   return (
     <div className={classes.root}>
       <FormControlLabel
-        control={
-          <Switch checked={hidden} onChange={handleHiddenChange} value="hidden" color="primary" />
-        }
+        control={<Switch checked={hidden} onChange={handleHiddenChange} color="primary" />}
         label="Hidden"
       />
       <FormLabel className={classes.radioGroup} component="legend">
diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js
index 556aea3711c897..34e64499ef6749 100644
--- a/docs/src/pages/components/switches/CustomizedSwitches.js
+++ b/docs/src/pages/components/switches/CustomizedSwitches.js
@@ -115,41 +115,25 @@ export default function CustomizedSwitches() {
     checkedC: true,
   });
 
-  const handleChange = name => event => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = event => {
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
     <FormGroup>
       <FormControlLabel
-        control={
-          <PurpleSwitch
-            checked={state.checkedA}
-            onChange={handleChange('checkedA')}
-            value="checkedA"
-          />
-        }
+        control={<PurpleSwitch checked={state.checkedA} onChange={handleChange} name="checkedA" />}
         label="Custom color"
       />
       <FormControlLabel
-        control={
-          <IOSSwitch
-            checked={state.checkedB}
-            onChange={handleChange('checkedB')}
-            value="checkedB"
-          />
-        }
+        control={<IOSSwitch checked={state.checkedB} onChange={handleChange} name="checkedB" />}
         label="iOS style"
       />
       <Typography component="div">
         <Grid component="label" container alignItems="center" spacing={1}>
           <Grid item>Off</Grid>
           <Grid item>
-            <AntSwitch
-              checked={state.checkedC}
-              onChange={handleChange('checkedC')}
-              value="checkedC"
-            />
+            <AntSwitch checked={state.checkedC} onChange={handleChange} name="checkedC" />
           </Grid>
           <Grid item>On</Grid>
         </Grid>
diff --git a/docs/src/pages/components/switches/CustomizedSwitches.tsx b/docs/src/pages/components/switches/CustomizedSwitches.tsx
index 31c6236c7ea39f..2179f9b5c29f86 100644
--- a/docs/src/pages/components/switches/CustomizedSwitches.tsx
+++ b/docs/src/pages/components/switches/CustomizedSwitches.tsx
@@ -127,41 +127,25 @@ export default function CustomizedSwitches() {
     checkedC: true,
   });
 
-  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
     <FormGroup>
       <FormControlLabel
-        control={
-          <PurpleSwitch
-            checked={state.checkedA}
-            onChange={handleChange('checkedA')}
-            value="checkedA"
-          />
-        }
+        control={<PurpleSwitch checked={state.checkedA} onChange={handleChange} name="checkedA" />}
         label="Custom color"
       />
       <FormControlLabel
-        control={
-          <IOSSwitch
-            checked={state.checkedB}
-            onChange={handleChange('checkedB')}
-            value="checkedB"
-          />
-        }
+        control={<IOSSwitch checked={state.checkedB} onChange={handleChange} name="checkedB" />}
         label="iOS style"
       />
       <Typography component="div">
         <Grid component="label" container alignItems="center" spacing={1}>
           <Grid item>Off</Grid>
           <Grid item>
-            <AntSwitch
-              checked={state.checkedC}
-              onChange={handleChange('checkedC')}
-              value="checkedC"
-            />
+            <AntSwitch checked={state.checkedC} onChange={handleChange} name="checkedC" />
           </Grid>
           <Grid item>On</Grid>
         </Grid>
diff --git a/docs/src/pages/components/switches/SwitchLabels.js b/docs/src/pages/components/switches/SwitchLabels.js
index 084ca43e98727b..4bb7066a390f1b 100644
--- a/docs/src/pages/components/switches/SwitchLabels.js
+++ b/docs/src/pages/components/switches/SwitchLabels.js
@@ -9,32 +9,30 @@ export default function SwitchLabels() {
     checkedB: true,
   });
 
-  const handleChange = name => event => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = event => {
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
     <FormGroup row>
       <FormControlLabel
-        control={
-          <Switch checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
-        }
+        control={<Switch checked={state.checkedA} onChange={handleChange} name="checkedA" />}
         label="Secondary"
       />
       <FormControlLabel
         control={
           <Switch
             checked={state.checkedB}
-            onChange={handleChange('checkedB')}
-            value="checkedB"
+            onChange={handleChange}
+            name="checkedB"
             color="primary"
           />
         }
         label="Primary"
       />
-      <FormControlLabel control={<Switch value="checkedC" />} label="Uncontrolled" />
-      <FormControlLabel disabled control={<Switch value="checkedD" />} label="Disabled" />
-      <FormControlLabel disabled control={<Switch checked value="checkedE" />} label="Disabled" />
+      <FormControlLabel control={<Switch />} label="Uncontrolled" />
+      <FormControlLabel disabled control={<Switch />} label="Disabled" />
+      <FormControlLabel disabled control={<Switch checked />} label="Disabled" />
     </FormGroup>
   );
 }
diff --git a/docs/src/pages/components/switches/SwitchLabels.tsx b/docs/src/pages/components/switches/SwitchLabels.tsx
index 3dbd5d14fb949b..1050a9df35d31b 100644
--- a/docs/src/pages/components/switches/SwitchLabels.tsx
+++ b/docs/src/pages/components/switches/SwitchLabels.tsx
@@ -9,32 +9,30 @@ export default function SwitchLabels() {
     checkedB: true,
   });
 
-  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
     <FormGroup row>
       <FormControlLabel
-        control={
-          <Switch checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
-        }
+        control={<Switch checked={state.checkedA} onChange={handleChange} name="checkedA" />}
         label="Secondary"
       />
       <FormControlLabel
         control={
           <Switch
             checked={state.checkedB}
-            onChange={handleChange('checkedB')}
-            value="checkedB"
+            onChange={handleChange}
+            name="checkedB"
             color="primary"
           />
         }
         label="Primary"
       />
-      <FormControlLabel control={<Switch value="checkedC" />} label="Uncontrolled" />
-      <FormControlLabel disabled control={<Switch value="checkedD" />} label="Disabled" />
-      <FormControlLabel disabled control={<Switch checked value="checkedE" />} label="Disabled" />
+      <FormControlLabel control={<Switch />} label="Uncontrolled" />
+      <FormControlLabel disabled control={<Switch />} label="Disabled" />
+      <FormControlLabel disabled control={<Switch checked />} label="Disabled" />
     </FormGroup>
   );
 }
diff --git a/docs/src/pages/components/switches/Switches.js b/docs/src/pages/components/switches/Switches.js
index 1065af4af60aa4..d617cd700b90bb 100644
--- a/docs/src/pages/components/switches/Switches.js
+++ b/docs/src/pages/components/switches/Switches.js
@@ -7,31 +7,30 @@ export default function Switches() {
     checkedB: true,
   });
 
-  const handleChange = name => event => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = event => {
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
     <div>
       <Switch
         checked={state.checkedA}
-        onChange={handleChange('checkedA')}
-        value="checkedA"
+        onChange={handleChange}
+        name="checkedA"
         inputProps={{ 'aria-label': 'secondary checkbox' }}
       />
       <Switch
         checked={state.checkedB}
-        onChange={handleChange('checkedB')}
-        value="checkedB"
+        onChange={handleChange}
         color="primary"
+        name="checkedB"
         inputProps={{ 'aria-label': 'primary checkbox' }}
       />
-      <Switch value="checkedC" inputProps={{ 'aria-label': 'primary checkbox' }} />
-      <Switch disabled value="checkedD" inputProps={{ 'aria-label': 'disabled checkbox' }} />
-      <Switch disabled checked value="checkedE" inputProps={{ 'aria-label': 'primary checkbox' }} />
+      <Switch inputProps={{ 'aria-label': 'primary checkbox' }} />
+      <Switch disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
+      <Switch disabled checked inputProps={{ 'aria-label': 'primary checkbox' }} />
       <Switch
         defaultChecked
-        value="checkedF"
         color="default"
         inputProps={{ 'aria-label': 'checkbox with default color' }}
       />
diff --git a/docs/src/pages/components/switches/Switches.tsx b/docs/src/pages/components/switches/Switches.tsx
index 5100b648e7276d..9edf8abdc4218e 100644
--- a/docs/src/pages/components/switches/Switches.tsx
+++ b/docs/src/pages/components/switches/Switches.tsx
@@ -7,31 +7,30 @@ export default function Switches() {
     checkedB: true,
   });
 
-  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
     <div>
       <Switch
         checked={state.checkedA}
-        onChange={handleChange('checkedA')}
-        value="checkedA"
+        onChange={handleChange}
+        name="checkedA"
         inputProps={{ 'aria-label': 'secondary checkbox' }}
       />
       <Switch
         checked={state.checkedB}
-        onChange={handleChange('checkedB')}
-        value="checkedB"
+        onChange={handleChange}
         color="primary"
+        name="checkedB"
         inputProps={{ 'aria-label': 'primary checkbox' }}
       />
-      <Switch value="checkedC" inputProps={{ 'aria-label': 'primary checkbox' }} />
-      <Switch disabled value="checkedD" inputProps={{ 'aria-label': 'disabled checkbox' }} />
-      <Switch disabled checked value="checkedE" inputProps={{ 'aria-label': 'primary checkbox' }} />
+      <Switch inputProps={{ 'aria-label': 'primary checkbox' }} />
+      <Switch disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
+      <Switch disabled checked inputProps={{ 'aria-label': 'primary checkbox' }} />
       <Switch
         defaultChecked
-        value="checkedF"
         color="default"
         inputProps={{ 'aria-label': 'checkbox with default color' }}
       />
diff --git a/docs/src/pages/components/switches/SwitchesGroup.js b/docs/src/pages/components/switches/SwitchesGroup.js
index a81d8719d72acd..c18f8560f1f8ee 100644
--- a/docs/src/pages/components/switches/SwitchesGroup.js
+++ b/docs/src/pages/components/switches/SwitchesGroup.js
@@ -13,8 +13,8 @@ export default function SwitchesGroup() {
     antoine: true,
   });
 
-  const handleChange = name => event => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = event => {
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
@@ -22,17 +22,15 @@ export default function SwitchesGroup() {
       <FormLabel component="legend">Assign responsibility</FormLabel>
       <FormGroup>
         <FormControlLabel
-          control={<Switch checked={state.gilad} onChange={handleChange('gilad')} value="gilad" />}
+          control={<Switch checked={state.gilad} onChange={handleChange} name="gilad" />}
           label="Gilad Gray"
         />
         <FormControlLabel
-          control={<Switch checked={state.jason} onChange={handleChange('jason')} value="jason" />}
+          control={<Switch checked={state.jason} onChange={handleChange} name="jason" />}
           label="Jason Killian"
         />
         <FormControlLabel
-          control={
-            <Switch checked={state.antoine} onChange={handleChange('antoine')} value="antoine" />
-          }
+          control={<Switch checked={state.antoine} onChange={handleChange} name="antoine" />}
           label="Antoine Llorca"
         />
       </FormGroup>
diff --git a/docs/src/pages/components/switches/SwitchesGroup.tsx b/docs/src/pages/components/switches/SwitchesGroup.tsx
index f3a7cbe3d28c25..5fedc68e3daf75 100644
--- a/docs/src/pages/components/switches/SwitchesGroup.tsx
+++ b/docs/src/pages/components/switches/SwitchesGroup.tsx
@@ -13,8 +13,8 @@ export default function SwitchesGroup() {
     antoine: true,
   });
 
-  const handleChange = (name: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
-    setState({ ...state, [name]: event.target.checked });
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({ ...state, [event.target.name]: event.target.checked });
   };
 
   return (
@@ -22,17 +22,15 @@ export default function SwitchesGroup() {
       <FormLabel component="legend">Assign responsibility</FormLabel>
       <FormGroup>
         <FormControlLabel
-          control={<Switch checked={state.gilad} onChange={handleChange('gilad')} value="gilad" />}
+          control={<Switch checked={state.gilad} onChange={handleChange} name="gilad" />}
           label="Gilad Gray"
         />
         <FormControlLabel
-          control={<Switch checked={state.jason} onChange={handleChange('jason')} value="jason" />}
+          control={<Switch checked={state.jason} onChange={handleChange} name="jason" />}
           label="Jason Killian"
         />
         <FormControlLabel
-          control={
-            <Switch checked={state.antoine} onChange={handleChange('antoine')} value="antoine" />
-          }
+          control={<Switch checked={state.antoine} onChange={handleChange} name="antoine" />}
           label="Antoine Llorca"
         />
       </FormGroup>
diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js
index d3386d72e70ffa..89dfe4ca85d2c5 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.js
+++ b/docs/src/pages/components/text-fields/FormattedInputs.js
@@ -69,10 +69,10 @@ export default function FormattedInputs() {
     numberformat: '1320',
   });
 
-  const handleChange = name => event => {
+  const handleChange = event => {
     setValues({
       ...values,
-      [name]: event.target.value,
+      [event.target.name]: event.target.value,
     });
   };
 
@@ -82,7 +82,8 @@ export default function FormattedInputs() {
         <InputLabel htmlFor="formatted-text-mask-input">react-text-mask</InputLabel>
         <Input
           value={values.textmask}
-          onChange={handleChange('textmask')}
+          onChange={handleChange}
+          name="formatted-text-mask-input"
           id="formatted-text-mask-input"
           inputComponent={TextMaskCustom}
         />
@@ -90,7 +91,8 @@ export default function FormattedInputs() {
       <TextField
         label="react-number-format"
         value={values.numberformat}
-        onChange={handleChange('numberformat')}
+        onChange={handleChange}
+        name="formatted-numberformat-input"
         id="formatted-numberformat-input"
         InputProps={{
           inputComponent: NumberFormatCustom,
diff --git a/docs/src/pages/components/text-fields/FormattedInputs.tsx b/docs/src/pages/components/text-fields/FormattedInputs.tsx
index 835e8d7db24f02..d0abcfc26d840d 100644
--- a/docs/src/pages/components/text-fields/FormattedInputs.tsx
+++ b/docs/src/pages/components/text-fields/FormattedInputs.tsx
@@ -75,10 +75,10 @@ export default function FormattedInputs() {
     numberformat: '1320',
   });
 
-  const handleChange = (name: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValues({
       ...values,
-      [name]: event.target.value,
+      [event.target.name]: event.target.value,
     });
   };
 
@@ -88,7 +88,8 @@ export default function FormattedInputs() {
         <InputLabel htmlFor="formatted-text-mask-input">react-text-mask</InputLabel>
         <Input
           value={values.textmask}
-          onChange={handleChange('textmask')}
+          onChange={handleChange}
+          name="formatted-text-mask-input"
           id="formatted-text-mask-input"
           inputComponent={TextMaskCustom as any}
         />
@@ -96,7 +97,8 @@ export default function FormattedInputs() {
       <TextField
         label="react-number-format"
         value={values.numberformat}
-        onChange={handleChange('numberformat')}
+        onChange={handleChange}
+        name="formatted-numberformat-input"
         id="formatted-numberformat-input"
         InputProps={{
           inputComponent: NumberFormatCustom as any,