clicking label doesn't click checkbox in React?

I have created a form where a user can pick options prior to submitting the form. I am hiding the checkboxes with display: none and am styling the <label> so that when the user clicks the label it triggers the checkbox.

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. ONLY 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.

Does anyone know how to hide the checkbox and still able to click the label in ReactJS?

Here is the codepen of what I am trying to build in ReactJS.