Getting error "TypeError: rangeValue.replace is not a function" when attempting to animate using React-Spring

I am trying to animate an h1 when a variable becomes true.

Here is some code:

  const styles = useSpring({
    from: {opacity: 0},
    enter: {opacity: 1}
  })
  return (
         <Toggle> // this is a component I have built, it has a function in it called toggle, which sets 
                     on to true or false.
            {({on, toggle}) => (
              <Fragment>
                <button onClick={toggle}>Spring</button>
                {(styles) => (
                  <Fragment>
                    {on && <animated.h1 style={{...this.styles}}>i will fade in</animated.h1>}
                  </Fragment>
                )}
              </Fragment>
            )}
          </Toggle>

I have read the docs but can't find a solution.