title: clicking label doesn't click checkbox in React?
body: <p>I have created a form where a user can pick options prior to submitting the form. I am hiding the checkboxes with <code>display: none</code> and am styling the <code>&lt;label&gt;</code> so that when the user clicks the label it triggers the checkbox. </p>
  
  <p>I've got this to work in vanilla HTML and CSS, however when I try this in React, clicking the label doesn't do anything. <b> ONLY </b> if I unhide the checkbox am I able to click on the checkbox and am able to see the label styling. I want to hide the checkbox though. </p>
  
  <p>Does anyone know how to hide the checkbox and still able to click the label in ReactJS?</p>
  
  <p>Here is the <a href="https://codepen.io/fleech/pen/dXymrz?editors=1100" rel="noreferrer">codepen</a> of what I am trying to build in ReactJS. </p>