Переключение между двумя анимациями в зависимости от состояния (стилизованные компоненты)

Question

Я пытаюсь запустить анимацию в зависимости от состояния моего родительского компонента.Я правильно передаю данные дочернему элементу (который является стилизованным компонентом), но у меня не получается запустить анимацию.Я попытался просто назначить анимацию стилизованному компоненту {Toggle}, и он все еще не видит его.Я думаю, что это проблема прохождения реквизита в самом компоненте, но я не уверен, что я ошибаюсь.

Parent:
class MonthlyProgressChart extends Component {
state = {
showChart: false,
toggleSwitch: false
}

handleClick = () => {
this.setState(prevState => ({
  showChart: !prevState.showChart,
  toggleSwitch: !prevState.toggleSwitch
}));
}

render() {
console.warn('toggle switch is', this.state.toggleSwitch)
console.warn(this.state.showChart)
return (
 <Container>
     <Switch onClick={this.handleClick} toggle={this.state.toggleSwitch} />
        <CardBody>
          {this.state.showChart 
          ? <Bar data={genLineData()} options={options} />
          : <Line data={genLineData({ fill: false }, { fill: false })} 
             options={options} />
          } 
        </CardBody>
 </Container>


Child:
import React, { Component } from 'react'
import styled, { keyframes } from 'styled-components'

const Holder = styled.div`
  cursor: pointer
  position: relative
  height: 30px
  width: 62px
  border-radius: 15px
  background: #ffffff
  transition: 0.15s background ease-out
  `;

const Toggle = styled.div`
  position: absolute
  top: 2px
  left: 2px
  width: 26px
  height: 26px
  border-radius: 13px
  background: #426986

${Holder}:hover & {
    background: #3C94D6
}

`;

const toggleOn = keyframes`
  0% {
    left: 2px;
  }

  100% {
    left: 34px;
  }
`;

const toggleOff = keyframes`
  0% {
    left: 34px;
  }

  100% {
    left: 2px;
  }
`;

const ToggleSwitch = styled.div`
  animation: ${props => props.toggle ? `${ToggleOff}` : `${ToggleOn}`}

`;

const ToggleOn = styled.div`
    animation: ${toggleOn} 0.15s cubic-bezier(0.19, 1, 0.22, 1)
    left: 34px

`;
const ToggleOff = styled.div`
    animation: ${toggleOff} 0.15s cubic-bezier(0.19, 1, 0.22, 1)
    left: 2px

`;
export default class Switch extends Component {
  render() {
    console.warn(this.props.toggle)
    return (
      <div> 
        <Holder onClick={this.props.onClick}>
            <ToggleSwitch toggle={this.props.toggle}>
              <Toggle />
            </ToggleSwitch>     
        </Holder> 

      </div>
    );
  }
}