How to use the react-spring.config.slow function in react-spring

const Theme = ({ state, libraries }) => {
  // Create a reference to disable the animation in the first render.
  const ref = React.useRef();

  // Create transitions using the current URL as trigger.
  const transitions = useTransition(state.router.link, link => link, {
    from: { opacity: 0.1, transform: "translate3D(0, -15px, 0)" },
    enter: { opacity: 1, transform: "translate3D(0, 0px, 0)" },
    update: { opacity: 1, transform: "translate3D(0, 0px, 0)" },
    leave: { opacity: 0, transform: "translate3D(0, -5px, 0)" },
    config: config.slow,
    immediate: !ref.current
  });

  // Check if the url is a search type
  const parse = libraries.source.parse(state.router.link);
  const isSearch = Boolean(parse.query["s"]);

  return (
    <>
      {/* Add some global styles for the whole site, like body or a's. 
        Not classes here because we use CSS-in-JS. Only global HTML tags. */}
      

      {/* Add some metatags to the  of the HTML. */}

function Container({children}) {
  return (
    
      {style => (
        
          
            {children}
          
        
      )}

const Card = ({ path, cover, date, areas, title, delay }) => {
  const springProps = useSpring({
    config: config.slow,
    delay: 200 * delay,
    from: { opacity: 0, transform: 'translate3d(0, 30px, 0)' },
    to: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
  })

  return (
    
      
        
          <img>
        
        <content>
          {title}
          
            <div>{date}</div>
            <div>
</div></content>

{showInput && (
           onBlur(token)}
            value={token}
            onChange={evt => onChange(evt.target.value)}
            autoFocus
          />
        )}
        {showValidation && (
          
            {({ opacity }) => this.renderIcon(token, valid, opacity)}
          
        )}
      
    );
  }
}

const About = () => {
  const pageAnimation = useSpring({
    config: config.slow,
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return (
    
      
      
        <h1>Hi. I'm LekoArts!</h1>
        <p>
          You can visit my <a href="https://www.lekoarts.de/en">website</a> or my other{' '}
          <a href="https://gatsby-starter-portfolio.netlify.com">Gatsby projects</a>.
        </p>
      
    
  )

... on MdxProject {
            parent {
              ... on Mdx {
                fields {
                  colorThief
                }
              }
            }
          }
        }
      }
    }
  `)

  const fadeUpProps = useSpring({
    config: config.slow,
    delay: 600,
    from: { opacity: 0, transform: `translate3d(0, 30px, 0)` },
    to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
  })

  if (projects.length === 0) {
    return (
      
        <header>
        
          
            Hi!{` `}
            <span aria-label="Wave emoji" role="img">
              👋
            </span>
            {` `}
</header>

const Project = ({ data: { mdx: postNode }, location }) => {
  const project = postNode.frontmatter

  const titleProps = useSpring({
    config: config.slow,
    from: { opacity: 0, transform: 'translate3d(0, -30px, 0)' },
    to: { opacity: 1, transform: 'translate3d(0, 0, 0)' },
  })
  const infoProps = useSpring({ config: config.slow, delay: 500, from: { opacity: 0 }, to: { opacity: 1 } })
  const contentProps = useSpring({ config: config.slow, delay: 1000, from: { opacity: 0 }, to: { opacity: 1 } })

  return (
    
      
      
        
          <img alt="">
        
        <content type="text">
          <title style="{titleProps}" data-testid="project-title">
            {project.title}
          </title>
          
            
              <div>Client</div></content>

const Page = ({ data: { page } }: Props) => {
  const titleProps = useSpring({
    config: config.slow,
    from: { opacity: 0, transform: `translate3d(0, -30px, 0)` },
    to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
  })
  const contentProps = useSpring({ config: config.slow, delay: 1000, from: { opacity: 0 }, to: { opacity: 1 } })

  return (

}
      }
    }
  `)

  const titleProps = useSpring({
    config: config.slow,
    from: { opacity: 0, transform: `translate3d(0, -30px, 0)` },
    to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
  })
  const backButtonProps = useSpring({
    config: config.slow,
    from: { opacity: 0, transform: `translate3d(-30px, 0, 0)` },
    to: { opacity: 1, transform: `translate3d(0, 0, 0)` },
  })
  const infoProps = useSpring({ config: config.slow, delay: 500, from: { opacity: 0 }, to: { opacity: 1 } })

  return (
    
      
      
        

const Carousel: React.FunctionComponent = () => {
  const [items] = useState([
    { title: 'GraphQL changed the way we create software', id: 0 },
    { title: 'Learn about GraphQL language for free in the browser', id: 1 },
    { title: 'Learn how to be Lead frontend engineer with GraphQL driven React and Apollo applications', id: 2 },
  ]);
  const [index, setIndex] = useState(0);

  const heightProps = useSpring({
    config: config.slow,
    from: { height: '0px' },
    to: { height: '700px' },
  });
  const opacityProps = useSpring({
    config: config.molasses,
    delay: 400,
    from: { opacity: 0 },
    to: { opacity: 1 },
  });

  const fadingTextPropsTransition = useTransition(items[index], (item) => item.id, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: { tension: 220, friction: 120 },
  });