Simple react-spring component not working in gatsby - Element type is invalid: expected a string or a class/function but got: undefined

Trying out react-spring, using a simple tutorial. However, it's not working for me. Here's my code:

import React, { Component } from "react"
import { Spring } from "react-spring"
export default class Box extends Component {
  render() {
    return (
      <Spring
        from={{ opacity: 0, marginTop: -1000 }}
        to={{ opacity: 1, marginTop: 0 }}
      >
        {props => (
          <div style={props}>
            <p>Welcome to your new Gatsby site.</p>
            <p>Now go build something great.</p>
          </div>
        )}
      </Spring>
    )
  }
}

and here's the error

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Box.

I'm using react-spring in gatsby's default starter, and am simply importing my Box component like so:

import React from "react"
import Layout from "../components/layout"
import Box from "../components/box"

const IndexPage = () => (
  <Layout>
    <Box />
  </Layout>
)

export default IndexPage