Handle indeterminate checkbox in react

So I've tried to build a simple react toggle which is based on a checkbox. I want the toggle to have three states: neutral, on, and off which are determined by a prop I pass to the component.

So far, I have the component rendering ok, but I can't get it to reflect the changes in whether it's indeterminate, on, or off. It just stays frozen in the 'off' position.

I suspect this is a combination of my CSS and potentially how I'm call the ref in my code.

Here's the code: https://codesandbox.io/s/objective-wozniak-z0tes?file=/src/index.js

Any advice appreciated!