Реагировать с помощью JSS - как добавить класс в дочерний компонент?

export const Animated = ({
  children,
  visible,
  direction = "up",
}: Props): JSX.Element => {
  const theme: any = useTheme();
  const [show, setShow] = useState(visible === "initialOn" || visible === true);
  if (visible !== "initialOn" && visible !== "initialOff") {
    if (show !== visible) {
      setShow(visible);
    }
  }
  const transitioned = useMountTransition(show, theme.defaultTransitionSpeed);
  const toggleVisibility = () => setShow(!show);
  const animatedClass = // this contains the JSS class I want to apply to the child's root element
    transitioned && show
      ? theme.animVisible[direction]
      : theme.animInVisible[direction];

  const childrenWithProps = React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, {
        toggleVisibility,
        animatedClass,
      });
    }
    return child;
  });

  return <>{(transitioned || show) && childrenWithProps}</>;
};

export const useStyles = createUseStyles<any, any>((theme: any) => {
  const { modalOuter, animatedClass } = theme;
  return {
    splashOuter: { //container div
      ...modalOuter,
      marginLeft: "auto",
      marginRight: "auto",
      ...animatedClass, // apply animation styles
    },
  };
});

const Welcome = ({ toggleVisibility, animatedClass }: Props): JSX.Element => {
  const theme = { ...useTheme(), animatedClass }; // additional styles applied within here
  const styles = useStyles({ theme });
  return (
    <div className = {styles.splashOuter}>
      <div className = {styles.splashInner}>
        <button className = {styles.button} onClick = {toggleVisibility}>
          PROCEED
        </button>
      </div>
    </div>
  );
};

export default Welcome;