Элемент начального реквизита элементов стиля - тройной/тип переключателя

Ниже у меня есть ярлык, который при загрузке не должен иметь анимации и фокуса в соответствии с props.moveLabelUp === true (входной фокус true) должен анимировать ярлык вверх и props.moveLabelUp === false (входной фокус false) должен анимировать ярлык вниз но при начальной загрузке анимации вообще не должно быть.

Я установил props.moveLabelUp равным нулю и придумал решение ниже:

Пожалуйста, сообщите, есть ли лучший способ его кодирования:

const StyledLabel: StyledComponentClass = styled(Label) '
  position: absolute;
  top: 9px;
  left: 5px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  background: white;
  color: ${props => props.moveLabelUp ? 'blue' : 'black'}
  transform: none;


  animation: ${props => props.moveLabelUp ? '
    ${moveLabelUp} .2s forwards ease;
    ' : '
    ${moveLabelBack} .2s forwards ease;
  '
}';

const StyledLabelOverride = StyledLabel.extend'
  animation: ${props => props.moveLabelUp === null && 'none'}
';

Здесь у нас есть анимации:

const moveLabelUp = keyframes'
  from {
    transform: translateY(0px); font-size: .9em;
  }


  to {
    transform: translateY(-16px); font-size: .8em;
  }
';

const moveLabelBack = keyframes'
  from {
    transform: translateY(-16px); font-size: .8em;
  }

  to {
    transform: translateY(0px); font-size: .9em;
  }
';

Благодарю.