How to use the react-pose.h2 function in react-pose

import styled from 'styled-components'
import posed from 'react-pose'
import Img from 'gatsby-image'
import { staggerChildren, appear } from '../../styles/poses'

const Wrapper = styled(posed.div(staggerChildren))`
  min-height: 300px;
  height: calc(100vh - 64px);
  background: ${props => props.brandColor};
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
`

const Title = styled(posed.h2(appear))`
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 1rem;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 2em;
  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
    font-size: 2.5em;
  }
`

const Plus = styled(posed.div(appear))`
  display: block;
  display: flex;
  justify-content: center;

const Item = styled.li`
  position: relative;
  width: 100%;
  margin: 0 0 1rem 0;
  @media screen and (min-width: ${props => props.theme.responsive.small}) {
    flex: 0 1 49%;
  }
  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
    margin: 0 0 0.5rem 0;
    &:last-child {
      margin: 0;
    }
  }
`

const Title = styled(posed.h2(slideUp))`
  z-index: 99;
  font-size: 1.25em;
  padding: 1rem;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  @media screen and (min-width: ${props => props.theme.responsive.medium}) {
    border: 0;
    padding: 0;
    margin: 0;
    display: inline-block;
    font-size: 2.5em;
    color: ${props => props.theme.colors.secondary};
  }
  @media screen and (min-width: ${props => props.theme.responsive.large}) {
    font-size: 3em;
  }