Final form animated condition component

Condition.tsx

import React from "react";
import { Field } from "react-final-form";
import { useSpring, animated } from "react-spring";

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

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

const Inner = ({
  value,
  is,
  children
}: {
  value: any;
  is: any;
  children: React.ReactNode;
}) => {
  const contentStatus = value === is;
  const contentProps = useSpring({
    opacity: contentStatus ? 1 : 0,
    transformOrigin: 'center top',
    transform: contentStatus ? "scale(1, 1)" : "scale(0.9, 0)"
  });
  if (!contentStatus) return null;

  return <animated.div style={contentProps}>{children}</animated.div>;
};

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

export default Condition;