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

import { animated } from 'react-spring'
import styled from 'styled-components'
import { Moon } from 'styled-icons/fa-solid/Moon'
import { Sun } from 'styled-icons/fa-solid/Sun'

export const Box = styled.div`
  display: grid;
  > * {
    /* for vertical centering */
    display: flex;
    grid-area: 1/1;
  }
`

// Needed as a selector in Notification below.
export const Div = styled(animated.div)``

export const Notification = styled.div`
  color: white;
  a {
    color: ${props => props.theme.lighterBlue};
  }
  position: absolute;
  top: calc(100% + 1em);
  width: max-content;
  max-width: 5em;
  text-align: center;
  background: rgba(0, 0, 0, 0.9);
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
  left: 50%;
  transform: translateX(-50%);

Gatsby (of course)
        Styled Components (for styling)
        GraphQL (to fetch data)
        React Spring (for animations)
        React Helmet (to change the head dynamically)
        Prism (to highlight blocks of code)
        Prettier + Standard (for linting and formatting)
      
    
  )
}

const Modal = styled(animated.div)`
  position: absolute;
  top: 25%;
  left: 5%;
  right: 5%;
  background: white;
  color: #666;
  padding: 3rem 4rem;
  border-radius: 5px;
  box-shadow: 0px 3px 8px 0px rgba(51, 51, 51, 0.65);

  @media (min-width: 768px) {
    top: 28%;
    left: 10%;
    right: 10%;
  }

import React, { useState } from "react"
import styled from "styled-components"
import { animated } from "react-spring"
import { isEdge } from "react-device-detect"

import BlobReveal from "../Blob/Reveal"
import Menu from "./MobileMenu"

const MenuWrapper = styled(animated.div)`
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
`

const Inner = styled.div`
  width: 100%;
  height: 100%;
  background: white;
  clip-path: url(#reveal);
`

const MobileMenu = ({ style, tickets, toggleMenu }) => {
  const [open, setOpen] = useState(true)

import { MDXRenderer } from 'gatsby-plugin-mdx'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'
import { SEO, Container, Layout, Hero, BGImage } from '../components'

const Content = styled(Container)`
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 2rem;
  padding-bottom: 2rem;
  z-index: 3;
`

const InformationWrapper = styled(animated.div)`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
`

const Title = styled(animated.h1)`
  margin-top: 0;
`

const InfoBlock = styled.div`
  display: flex;
  flex-direction: column;
  margin: 1rem 2rem 0 0;
  div:first-child {
    text-transform: uppercase;

`

const Container = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 8px;
  @media screen and (max-width: 740px) {
    flex-direction: column;
    margin-top: 80px;
  }
`

const LeftSection = styled(animated.div)`
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 45%;
  margin: 0 auto;
  text-align: center;
  @media screen and (max-width: 740px) {
    width: 100%;
    margin-top: 0;
    text-align: center;
  }
`

const Title = styled.h1`
  font-size: 2rem;
  font-weight: bold;

outline: 0;
  border: none;
  background: transparent;
  display: flex;
  align-self: flex-end;
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding-bottom: 14px;
  color: rgba(255, 255, 255, 0.5);
  :hover {
    color: rgba(255, 255, 255, 0.6);
  }
`

export const Life = styled(animated.div)`
  position: absolute;
  bottom: ${props => (props.top ? '10px' : '0')};
  left: 0px;
  width: auto;
  background-image: linear-gradient(130deg, #00b4e6, #00f0e0);
  height: 5px;
`

import { connect } from 'react-redux'
import { animated, Transition } from 'react-spring'
import styled from 'styled-components'
import { closeModal, modalSelectors } from 'reducers/modal'
import { Modal, ModalOverlayStyles } from 'components/UI'
import { useOnKeydown } from 'hooks'
import Pay from 'containers/Pay'
import Request from 'containers/Request'
import Channels from 'containers/Channels'
import ChannelCloseDialog from 'containers/Channels/ChannelCloseDialog'
import ChannelDetail from 'containers/Channels/ChannelDetail'
import ChannelCreate from 'containers/Channels/ChannelCreate'
import ReceiveModal from 'containers/Wallet/ReceiveModal'
import ActivityModal from 'containers/Activity/ActivityModal'

const Container = styled(animated.div)`
  ${ModalOverlayStyles}
`

const ModalContent = ({ type, closeModal }) => {
  switch (type) {
    case 'PAY_FORM':
      return 

    case 'REQUEST_FORM':
      return 

    case 'RECEIVE_MODAL':
      return 

    case 'ACTIVITY_MODAL':
      return

display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 4px;
`;

const Spinner = styled(MDSpinner)``;

const LabelWrapper = styled.div`
  grid-area: label;
  justify-content: center;
  align-items: center;
  position: relative;
`;

const Label = styled(animated.div)`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  will-change: transform, opacity;
  overflow: hidden;
  font-size: ${properties.fontSizes.s};
`;

const Ratio = styled.div`
  display: flex;
  font-size: ${properties.fontSizes.s};
  grid-area: ratio;
  margin-right: 4px;

import React from "react";
import { animated, useSpring } from "react-spring";
import styled, { keyframes } from "styled-components";

import {TimerCss, TimerThreadCss} from "./styles";

const Timer = styled(animated.div)`${TimerCss}`;
const TimerThread = styled(animated.div)`${TimerThreadCss}`;

const balloonColorLight = '#c0392b';

const topBubbles = keyframes`
  0% {
    background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
      40% 90%, 55% 90%, 70% 90%;
  }
  50% {
    background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
      50% 50%, 65% 20%, 90% 30%;
  }
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
      50% 40%, 65% 10%, 90% 20%;

}, [])

  return (
    
       imageData[id])}
      />

      
    
  )
}