How to use the react-spring.animated function in react-spring

${tw`list-none p-0`};
`;

const MobileMenuListItem = styled.li`
  ${tw`border-b border-grey`};
  &:first-child {
    ${tw`border-t`};
  }
`;

const MobileMenuLink = styled.a`
  ${tw`text-center block py-3`};
`;

const AnimatedDialogOverlay = animated(StyledDialogOverlay);
const AnimatedDialogContent = animated(StyledDialogContent);

interface MobileMenuProps {
  open: boolean;
  user?: {
    username: string;
  };
  userImage?: string;
  onClose: () => void;
  onLogin: () => void;
  onLogout: () => void;
}

// TODO animation when open / close the menu
export const MobileMenu = ({
  open,
  user,

}
    };

    const ID = useMemo(() => uniqueIDFromPrefix("newpost"), []);
    const buttonID = ID + "-button";
    const menuID = ID + "-menu";

    const bgVars = newPostBackgroundVariables();
    const bgTransition = useSpring({
        ref: backgroundRef,
        backgroundColor: state.open ? colorOut(bgVars.container.color.open) : colorOut(bgVars.container.color.close),
        from: { backgroundColor: colorOut(bgVars.container.color.close) },
        config: { duration: bgVars.container.duration },
    });

    const AnimatedButton = animated(Button);
    const { o, d, s } = useSpring({
        config: { duration: 150 },
        o: state.open ? vars.toggle.opacity.open : vars.toggle.opacity.close,
        d: state.open ? vars.toggle.degree.open : vars.toggle.degree.close,
        s: state.open ? vars.toggle.scale.open : vars.toggle.scale.close,
        from: { o: vars.toggle.opacity.close, d: vars.toggle.degree.close, s: vars.toggle.scale.close },
    });

    const menu = useSpring({
        ref: menuRef,
        config: { duration: 150 },
        opacity: state.open ? vars.menu.opacity.open : vars.menu.opacity.close,
        display: state.open ? vars.menu.display.open : vars.menu.display.close,
        from: { opacity: vars.menu.opacity.close, display: vars.menu.display.close },
        onRest: () => handleAccessibility(items),
    });

return {
    id,
    filename,
    cdnUrl: cdnUrl(`screenshot/browser/${theme}/${filename}`)
  }
})

const screenshotsUrls = map(screenshots, 'cdnUrl')

class ImageWithRef extends React.Component {
  render () {
    return <img>
  }
}

export const AnimatedImage = animated(styled(ImageWithRef)`
  position: absolute;
  top: 0px;
  left: 0px;
  will-change: opacity;
`)

export const screenshotHeight = (() =&gt; {
  const width = 960
  const ratio = 1.453403141
  const height = width / ratio
  return aspectRatio.ratios.map(n =&gt; toPx(height * n))
})()

const Screenshots = props =&gt; {
  const [index, setIndex] = useState(0)
  const onClick = useCallback(

translateY={interpolated.translateY}
                    >
                      {outdatedChildren || children}
                    
                  
                )}
              
            );
          }}
        
      
    );
  }
}

const Wrapper = animated(styled.div.attrs({
  style: props => ({
    opacity: props.opacity,
    pointerEvents: props.clickable ? 'auto' : 'none',
  }),
})`
  position: fixed;
  z-index: ${Z_INDICES.modal};
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  will-change: opacity;
  /*

padding: 1em;
  border-radius: 0.5em;
  color: white;
`;

const Secret = styled.div`
  font-family: ${p => p.theme.fontFamilyFixed};
  margin-bottom: 1rem;
  font-size: 1.25em;
  line-height: 1;
  &:last-child {
    margin-bottom: 0;
  }
`;

const AnimatedSecret = animated(Secret);

/*
for unknown reason, the chars array shrinks to match new props but will not expand again
e.g. if we start with string length 10 and increase it to 15, only the first 10 chars will render
if we then set it to length 8, only 8 chars will ever render, etc
this solution pads the string's char code array with a sentinel value of empty string
then filters those values out again before the chars are interpolated into the view
so the chars array length will always be 100, longer than our input string will ever be
config reset -> true resolves artifact where additional chars don't animate after length is increased
*/

export default function Outputs({ secrets }) {
  const lastLength = useRef(0);
  const charArrays = secrets.map(s => convertToCharCodeArray(s)).map(a => padArray(a, '', 100));
  const [transitions, setTransitions] = useSprings(charArrays.length, i => ({
    from: { chars: convertToCharCodeArray(generatePassword(100)) }

const Message = ({ show, children }) => {
  const slideUpTransitions = useTransition(show, null, {
    enter: { transform: "scaleY(1)" },
    leave: { transform: "scale(0)" },
    from: { transform: "scaleY(0)" },
    config: config.slow,
  });
  const AnimatedContainer = animated(Container);
  return slideUpTransitions.map(
    ({ item, key, props }) =>
      item && (
        
          {children}
        
      )
  );
};

Text,
  Button,
  Input,
  InputGroup,
  LayerLoading,
  Alert,
  Container,
  useTheme
} from "sancho";
import { loginWithGoogle, loginWithEmail, createUserWithEmail } from "./auth";
import useReactRouter from "use-react-router";
import queryString from "query-string";
import { LoginLayout } from "./LoginLayout";
import { animated, useTrail, config } from "react-spring";

const AnimatedLayer = animated(Layer) as any;

export interface LoginProps {}

export const Login: React.FunctionComponent = props => {
  const theme = useTheme();
  const { location } = useReactRouter();
  const qs = queryString.parse(location.search);
  const [isRegistering, setIsRegistering] = React.useState(
    typeof qs.register === "string"
  );

  const [loading, setLoading] = React.useState(false);
  const [redirectToReferrer, setRedirectToReferrer] = React.useState(false);

  const { from } = location.state || { from: { pathname: "/me" } };

finishedOnboarding || introSequenceStepIndex >= 2
                    }
                    isOnline={isOnline}
                  />
                
              
            
            {isVisible && }
          
        )}
      
    );
  }
}

const Wrapper = animated(styled.nav.attrs({
  style: props => ({
    transform: `translateX(${props.offset})`,
  }),
})`
  position: fixed;
  z-index: ${Z_INDICES.sidebar};
  top: 0;
  left: -${SIDEBAR_OVERFLOW}px;
  bottom: 0;
  width: ${SIDEBAR_WIDTH + SIDEBAR_OVERFLOW}px;
  padding-left: ${SIDEBAR_OVERFLOW}px;
  background-image: linear-gradient(
    85deg,
    ${COLORS.blue[900]},
    ${COLORS.blue[700]}
  );

progress={interpolated.progress}
            />
          )}
        
      
    );
  }
}

export const Wrapper = styled.div`
  position: relative;
  height: ${props => props.height}px;
  width: 100%;
`;

const ProgressGradient = animated(styled.div.attrs({
  style: props => ({
    clipPath: `polygon(
      0% 0%,
      ${props.progress * 100}% 0%,
      ${props.progress * 100}% 100%,
      0% 100%
    `,
  }),
})`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, ${props => props.colors.join(', ')});
`);