can't get TransitionMotion to work in React Motion

Question

I'm trying to render a set of data (this.props.data) in React with mount/unmount animation using react-motion TransitionMotion and spring. This data is being updated from a separate component, via a search/filter function. I tried my best to follow the API reference, but console debug is still throwing me this warning: Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.

Despite this warning, the data still manages to render. There are no mount/unmount transitions, and even if I'm just rendering 10 items max, the entire tab lags like hell when I change the contents of this.props.data.

Does anyone know what funky thing is going on with my code? Any help with debugging is appreciated.

import React, { Component } from "react";

import classNames from "classnames";
import { TransitionMotion, spring } from "react-motion";

import QtlPanel from "../QtlPanel.jsx";
import GenePanel from "../GenePanel.jsx";
import Loader from "./Loader.jsx";

class PanelArea extends Component {
  getDefaultStyles = () => {
    return this.props.data.map( item => ({
      key: item.id.toString(),
      data: item,
      style: {
        height: 0,
        opacity: 1
      }
    }) );
  }

  getStyles = () => {
    return this.props.data.map( item => ({
      key: item.id.toString(),
      data: item,
      style: {
        height: spring(80),
        opacity: spring(1)
      }
    }) );
  }

  willEnter = () => ({
    height: spring(0),
    opacity: spring(1)
  })

  willLeave = () => ({
    height: spring(0),
    opacity: spring(0)
  })

  render() {
    const classes = classNames(
      "panel-area", {
        "loading": this.props.loading
      }
    );

    const transitionProps = {
      defaultStyles: this.getDefaultStyles(),
      styles: this.getStyles(),
      willEnter: this.willEnter,
      willLeave: this.willLeave
    };

    return (
      <div className={classes}>
        <Loader isLoading={ this.props.loading } />
        <TransitionMotion { ...transitionProps }>
          { styles => (
            <div>
              { styles.map(({ key, style, data }) => {
                const panelProps = {
                  key: key,
                  data: data,
                  style: style
                };

                if (this.props.activeDataset === "qtl") {
                  return <QtlPanel { ...panelProps } />;
                } else {
                  return <GenePanel { ...panelProps } />;
                }
              }) }
            </div>
          ) }
        </TransitionMotion>
      </div>
    );
  }
}

export default PanelArea;