title: Event Handler for a non-selectable menu item
body: <p>I am creating a form with Material UI React. This form will log a set for an exercise to my database. For one of the inputs, users select the name of the exercise they want to log from a list of Material UI Menu Item components. I also want to give the user the option to add an exercise to the list if it's not included (new exercise they haven't done before). I added the disabled attribute and tried to use onClick event listener like so:</p>
  <pre><code>&lt;TextField
    id=&quot;exerciseName&quot;
    label=&quot;Exercise Name&quot;
    select
  &gt;
    &lt;MenuItem disabled onClick={() =&gt; console.log(&quot;Add Exercise Clicked&quot;)}&gt;
      Add Exercise
    &lt;/MenuItem&gt;
  
    {exercises &amp;&amp;
      exercises.map((exercise) =&gt; (
        &lt;MenuItem key={exercise.id} value={exercise.exerciseName}&gt;
          {exercise.exerciseName}
        &lt;/MenuItem&gt;
    ))}
  &lt;/TextField&gt;
  </code></pre>
  <p>After trying this, I realised that event handlers can not be triggered on disabled elements. Is there a way in which I can achieve a disabled state for the add exercise menu item, so that it can't be selected as a value for the input, but runs an onClick handler when triggered?</p>