Не удается заставить TransitionMotion работать в React Motion

Question

Я пытаюсь сделать набор данных (this.props.data) в React с анимацией монтирования / размонтирования с использованием реакции-движения TransitionMotion и пружины. Эти данные обновляются из отдельного компонента с помощью функции поиска / фильтрации. Я старался изо всех сил, чтобы следовать справке API, но отладка консоли все еще выдает мне это предупреждение: Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.

Несмотря на это предупреждение, данные все равно удается отобразить. Там нет переходов монтирования / размонтирования, и даже если я просто рендеринг максимум 10 элементов, вся вкладка отстает, как ад, когда я изменяю содержимое this.props.data,

Кто-нибудь знает, что происходит с моим кодом? Любая помощь с отладкой приветствуется.

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;