react svg animation

svg

const Icon = props => (
  <svg
    height={props.height + 'px'}
    width={props.width + 'px'}
    style={props.style}
    viewBox="0 0 89.62 92.78"
  >
    <g id="Layer_1-2" data-name="Layer 1">
      <path
        style={{
          transform: props.isActive
            ? 'rotate(-25deg) translateY(13px) translateX(-22px)'
            : 'rotate(0) translateY(0)',
          transition: 'transform 500ms ease'
        }}
        d="M0,39.36A39.34,39.34,0,0,0,63,70.77L83,91.59a3.85,3.85,0,1,0,5.56-5.32L68.71,65.56A39.35,39.35,0,1,0,0,39.36Zm7.7,0A31.67,31.67,0,1,1,39.36,71,31.7,31.7,0,0,1,7.7,39.36Z"
      />
      <path
        style={{
          transform: props.isActive ? 'scale(1)' : 'scale(0)',
          transition: 'transform 250ms ease'
        }}
        d="M60.24,33.55,41.78,19.18a3.24,3.24,0,0,0-2.22-.88h.94a6.11,6.11,0,0,0-3.2.91L19.1,33.83a1.44,1.44,0,1,0,1.81,2.25l2.43-2V53.29a3.28,3.28,0,0,0,3.28,3.28H52.76A3.28,3.28,0,0,0,56,53.29V33.94l2.43,1.89a1.44,1.44,0,0,0,1.77-2.28ZM44,53.68H35.36V38.2a.39.39,0,0,1,.39-.39h7.87a.39.39,0,0,1,.39.39Zm9.14-.39a.39.39,0,0,1-.39.39H46.9V38.2a3.28,3.28,0,0,0-3.28-3.28H35.75a3.28,3.28,0,0,0-3.28,3.28V53.68H26.61a.39.39,0,0,1-.39-.39V31.82l12.95-10.4.12-.11a.38.38,0,0,1,.27-.11.36.36,0,0,1,.27.11L53.15,31.69Z"
      />
    </g>
  </svg>
);