Нормальная ToogleButton на React. Как?

import * as React from 'react';
import styled from 'styled-components';


const Wrapper = styled.label`
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
`;

const Input: any = styled.input`
  display: none;
`;

const Slider = styled.div`
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .2s;
  border-radius: 34px;
  
  &:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 1px;
    bottom: 1px;
    background-color: white;
    transition: .2s;
    border-radius: 50%;
  }
  
  ${Input}:checked + & {
    background-color: ${props => props.theme.someColor1};
  }
  
  ${Input}:focus + & {
    box-shadow: 0 0 1px ${props => props.theme.someColor2};
  }
  
  ${Input}:checked + &:before {
    transform: translateX(16px);
  }
`;

interface Props = {
  name?: string
  checked?: boolean
  onChange?: Function
  innerRef?: Function
  className?: string
}

const ToggleSwitch = ({ innerRef, checked, onChange, className, name }: Props) => {
  return (
    <Wrapper className={className}>
      <Input 
        innerRef={innerRef}
        checked={checked}
        onChange={onChange}
        name={name}
        type="checkbox"
      />
      <Slider />
    </Wrapper>
  );
}