title: Add text inside the switch using material ui
body: <p>I am using Material UI's Switch component and I want to add text inside it. I want something like in the image below.</p>
  <p><a href="https://i.stack.imgur.com/KadRZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KadRZ.png" alt="enter image description here" /></a></p>
  <p>Here's my code.</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import Switch from '@material-ui/core/Switch';
  
  export default function Switches() {
    const [state, setState] = React.useState({
      checkedA: true,
    });
  
    const handleChange = (event) =&gt; {
      setState({ ...state, [event.target.name]: event.target.checked });
    };
  
    return (
      &lt;div&gt;
        &lt;Switch
          checked={state.checkedA}
          onChange={handleChange}
          name=&quot;checkedA&quot;
          inputProps={{ 'aria-label': 'secondary checkbox' }}
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I already searched for the answer and found <a href="https://stackoverflow.com/questions/61723479/how-to-add-text-inside-a-switch-component-in-material-ui-react">How to add text inside a Switch Component in Material-UI React?</a> and <a href="https://stackoverflow.com/questions/56128013/add-text-to-switch-formcontrol-and-change-it-in-toggle-using-material-ui">Add text to Switch formcontrol and change it in toggle using material ui</a> . Both of them were not helpful for me.</p>