radioToggle.js

// React State
const [fileView, setFileView] = useState('SELECTED');

// this is our onChange handler  
const toggleAll = e => {
    setFileView(e.target.value);
  };

// JSX
<header className="files-toggle">
    <input
      onChange={e => toggleAll(e)}
      checked={fileView === "ALL"}
      value="ALL"
      type="radio"
      id="all-radio"
      name="header-radio"
    />
    <label
      className={selectedPackages.length ? "" : "radio-disabled"}
      htmlFor="all-radio"
    >
      All
    </label>

    <input
      onChange={e => toggleAll(e)}
      checked={fileView === "SELECTED"}
      value="SELECTED"
      type="radio"
      id="selected-radio"
      name="header-radio"
    />
    <label htmlFor="selected-radio">Selected</label>
  </header>

// STYLES
label {
      width: 50%;
      border: 2px solid #4d5864;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      color: white;
      cursor: pointer;

      &:disabled {
        opacity: 0.5;
        cursor: default;
      }
    }

    .radio-disabled {
      opacity: 0.5;
      cursor: default;
    }

    input[type="radio"] {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    input[type="radio"]:checked ~ label {
      background-color: $fabBlue;
    }