Final form condition animated component with leave staet and translate animation

Condition.tsx

import React from "react";
import { Field } from "react-final-form";
import { useTransition, animated } from "react-spring";
import styled from "styled-components";

interface Props extends React.HTMLProps<HTMLElement> {
  when: string;
  is: any;
}

interface InnerProps {
  input: {
    value: any;
  };
}

const Wrapper = styled.div`
  overflow: hidden;
`;

const Inner = ({
  value,
  is,
  children
}: {
  value: any;
  is: any;
  children: React.ReactNode;
}) => {
  const contentStatus = value === is;
  const transitions = useTransition(contentStatus, null, {
    from: {
      transformOrigin: "top center",
      opacity: 0,
      transform: "translateY(-100%)"
    },
    enter: { opacity: 1, transform: "translateY(0)" },
    leave: { opacity: 0, transform: "translateY(-100%)" }
  });
  return transitions.map(
    ({ item, key, props }) =>
      item && (
        <animated.div key={key} style={props}>
          {children}
        </animated.div>
      )
  );
};

const Condition = ({ when, is, children }: Props) => (
  <Wrapper>
    <Field name={when} subscription={{ value: true }}>
      {({ input: { value } }: InnerProps) => (
        // @ts-ignore
        <Inner value={value} is={is}>
          {children}
        </Inner>
      )}
    </Field>
  </Wrapper>
);

export default Condition;