Switching My Inner Div To The Other Side In A Switch Button

class Switch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      checked: false
    }
    this.onChange = this.onChange.bind();
  }

  onChange = () => {
    this.setState({ 
      checked: !this.state.checked});
      console.log(this.state.checked)
    } 

render () {
  return (
  <div className='switch-box' checked={this.state.checked} onClick={this.onChange} >
    <div className='switch-rectangle-box'>
    </div>
    <div className='switch-inside-box'></div>
  </div>
  );
}

}

 export default Switch

.switch-rectangle-box {
  color: $grey;
  display: inline-block;
  min-width: 44px;
  height: 22px;
  background-color: $grey;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
}

.switch-inside-box {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  background-color: $light;
  border-radius: 18px;
  cursor: pointer;
}