title: How to use React Ref with Styled Component
body: <p>I am running React 16.8.6 and Styled Components 4.3.2 currently and am hitting an issue trying to use React.forwardRef.</p>
  
  <p>In Comments.js</p>
  
  <pre><code>import CommentItem from './CommentItem';
  class Comments extends Component {
    constructor(props) {
      super(props);
      this.items = [];
    }
  
    componentDidMount() {
      console.log(this.items);
    }
  
    render() {
      const { comments } = this.props;
      return (
        &lt;div&gt;
            {comments.length &gt; 0 &amp;&amp;
              comments.map((comment, i) =&gt; {
                this.items[i] = React.createRef();
                return (
                  &lt;CommentItem
                    ref={this.items[i]}
                    key={comment.id}
                    comment={comment}
                  /&gt;
                );
              })}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>In CommentItem.js</p>
  
  <pre><code>import styled from "styled-components";
  import { Media } from "react-bulma-components";
  
  const CommentMediaWrapper = styled(Media)`
    position: relative;
  `;
  const CommentItem = React.forwardRef(
    ({ comment }, ref) =&gt; {
      return (
        &lt;CommentMediaWrapper ref={ref}&gt;
          &lt;div&gt;...&lt;/div&gt;
        &lt;/CommentMediaWrapper&gt;
      );
    }
  );
  export default CommentItem;
  </code></pre>
  
  <p>In Comments.js will console an array <code>[{ current: null },...]</code>
  I don't know how to pass ref in to <code>CommentMediaWrapper</code>. I don't want add new element outer or inner <code>CommentMediaWrapper</code>. Thank for your help.</p>