title: Testing MUI checkbox with react-testing-library
body: <p>In a react component I have a checkbox from Material UI with this markup:</p>
  
  <pre><code>&lt;label class="MuiFormControlLabel-root"&gt;
     &lt;span class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-353 MuiCheckbox-root MuiCheckbox-colorPrimary PrivateSwitchBase-checked-354 Mui-checked MuiIconButton-colorPrimary" aria-disabled="false"&gt;
        &lt;span class="MuiIconButton-label"&gt;
           &lt;input class="PrivateSwitchBase-input-356" id="citizen-profile-challenge-checkbox-diabetes" type="checkbox" data-indeterminate="false" value="other" checked=""&gt;
           &lt;svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"&gt;
              &lt;path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"&gt;&lt;/path&gt;
           &lt;/svg&gt;
        &lt;/span&gt;
        &lt;span class="MuiTouchRipple-root"&gt;&lt;/span&gt;
     &lt;/span&gt;
     &lt;span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"&gt;Other&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>I'm trying to follow the guide lines by querying on the labels (in this case "Other") instead of using id's.</p>
  
  <p>So I want to click the checkbox with label "Other" (<code>&lt;span class="MuiTypography-root MuiFormControlLabel-label MuiTypography-body1"&gt;Other&lt;/span&gt;</code>) and test that the value of Checkbox changes (<code>&lt;input class="PrivateSwitchBase-input-356" id="citizen-profile-challenge-checkbox-diabetes" type="checkbox" data-indeterminate="false" value="other" checked=""&gt;</code>).</p>
  
  <pre><code>fireEvent.click(getByLabelText('Other', { selector: 'input' }))
  const checked1 = (getByLabelText('Other', { selector: 'input' }) as HTMLInputElement).checked
  console.log(checked1) // false
  
  fireEvent.click(getByLabelText('Other', { selector: 'input' }))
  const checked2 = (getByLabelText('Other', { selector: 'input' }) as HTMLInputElement).checked
  console.log(checked2) // false
  
  fireEvent.click(getByLabelText('Other'))
  const checked3 = (getByLabelText('Other') as HTMLInputElement).checked
  console.log(checked3) // false
  
  fireEvent.click(getByLabelText('Other'))
  const checked4 = (getByLabelText('Other') as HTMLInputElement).checked
  console.log(checked4) // false
  </code></pre>
  
  <p>I tried different methods but <code>checked</code> remains <code>false</code>. Seems like instad I need to grab the sibling of the label span and search for the  there. But how do I do that? </p>