JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li onclick="document.getElementById('a1').checked = !document.getElementById('a1').checked;">
    <input id="a1" type="checkbox" onclick="event.stopPropagation();"><label f1">1</label>
  </li>
  <li onclick="document.getElementById('a2').checked = !document.getElementById('a2').checked;">
    <input id="a2" type="checkbox" onclick="event.stopPropagation();"><label for="a2">2</label>
  </li>
  <li onclick="document.getElementById('a3').checked = !document.getElementById('a3').checked;">
    <input id="a3" type="checkbox" onclick="event.stopPropagation();"><label for="a3">3</label>
  </li>
</ul>