title: Use onChange in Material UI tabs handleChange function in React component
body: <p>Currently I have a certain navigation setup like this:</p>
  <pre><code>      &lt;div&gt;
          {letters?.map((letter) =&gt; {
            return (
              &lt;button
                type=&quot;button&quot;
                key={item.value}
                data-active={value === item.value}
                onClick={() =&gt; {
                  if (onChange) {
                    onChange(item.value);
                  }
                }}
              &gt;
                {item.label}
              &lt;/button&gt;
            );
          })}
        &lt;/div&gt;
  </code></pre>
  <p>I want to change it, to use <a href="https://material-ui.com/api/tabs/" rel="nofollow noreferrer">Material UI tabs</a>.</p>
  <p>I have the following:</p>
  <pre><code>const MyComponent = ({ firstLetters }: Props) =&gt; {
    const [value, setValue] = useState(0);
  
    const handleChange = (_event: React.ChangeEvent&lt;{}&gt;, newValue: string) =&gt; {
      console.warn(newValue);
      setValue(newValue);
    };
  
    return (
          &lt;Tabs css={styles.tabsRoot} value={value} onChange={handleChange}&gt;
            {firstLetters?.map((item) =&gt; {
              return (
                &lt;Tab
                  key={item.value}
                  label={item.label}
                  disableRipple
                /&gt;
              );
            })}
          &lt;/Tabs&gt;
    )
  };
  </code></pre>
  <p>How do I use <code>onChange</code> like my previous <code>onClick</code> function callback into the <code>handleChange</code> function?</p>