title: Passing ref to child component to animate with GSAP
body: <p>I'm new to React and i am trying to integrate GSAP to animate a child component using refs. The process to try and animate worked fine before I seperated out the elements into their different components!</p>
  
  <p>There are no error codes from React, but I do get the following console error:</p>
  
  <p>Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</p>
  
  <p>I've looked into the forwardRef mentioned but not sure if it's right for what i'm trying to achieve.</p>
  
  <pre><code>/**
   * Parent Component
   */
  import React, { Component } from 'react';
  import Spirit from './Spirit';
  import { TweenMax, Power1 } from 'gsap';
  
  class SpiritResults extends Component {
    constructor(props) {
      super(props);
  
      this.multiElements = [];
    }
  
    componentDidMount() {
      TweenMax.staggerFromTo(
        this.multiElements,
        0.5,
        { autoAlpha: 0 },
        { autoAlpha: 1, ease: Power1.easeInOut },
        0.1
      );
    }
  
    render() {
      return (
        &lt;ul className="mm-results"&gt;
          {this.props.spirits.map(({ id, title, featImg, link, slug, index }) =&gt; (
            &lt;Spirit
              key={id}
              slug={slug}
              title={title}
              featImg={featImg}
              link={link}
              ref={li =&gt; (this.multiElements[index] = li)}
            /&gt;
          ))}
        &lt;/ul&gt;
      );
    }
  }
  
  /**
   * Child Component
   */
  import React from 'react';
  
  const Spirit = ({ slug, link, featImg, title, index }) =&gt; (
    &lt;li id={slug} className="mm-item" ref={index}&gt;
      &lt;a href={link}&gt;
        &lt;div className="inner"&gt;
          &lt;img src={featImg} alt={title} /&gt;
          &lt;h3&gt;{title}&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  );
  
  export default Spirit;
  
  </code></pre>
  
  <p>Any tips that can be given to get the animation to work would be appreciated. If there are any better ways of animating react with GSAP please let me know your thoughts.</p>
  
  <p>Thanks</p>