title: Forwarding ref in a functional component with react-redux (v. 6.0.1)
body: <p>I'm trying to use <code>forwardRef</code> in my functional component that is also using <code>react-redux</code>. My component looks like this:</p>
  
  <pre><code>const InfiniteTable = ({
    columns,
    url,
    data,
    stateKey,
    loading,
    loadMore,
    fetchData,
    customRecordParams,
    ...rest
  }, ref) =&gt; {
    const [start, setStart] = useState(0);
    const tableRef = React.createRef();
  
    console.log(rest);
  
    let dataSource = data;
    if (customRecordParams) dataSource = _.map(dataSource, customRecordParams);
    if (dataSource.length &gt; FETCH_LIMIT)
      dataSource = _.slice(dataSource, 0, start + FETCH_LIMIT);
  
    useEffect(() =&gt; setupScroll(setStart, tableRef), []);
    useEffect(() =&gt; {
      if (loadMore) fetchData(url, stateKey, { start });
    }, [start, loadMore]);
  
    useImperativeHandle(ref, () =&gt; ({
      handleSearch: term =&gt; console.log(term),
      handleReset: () =&gt; console.log("reset")
    }));
  
    return (
      &lt;Table
        columns={columns}
        dataSource={dataSource}
        pagination={false}
        showHeader
        loading={loading}
      /&gt;
    );
  }; 
  
  const mapStateToProps = (state, ownProps) =&gt; ({
    data: Object.values(state[ownProps.stateKey].data),
    loading: state[ownProps.stateKey].isFetching,
    loadMore: state[ownProps.stateKey].loadMore
  });
  
  export default connect(
    mapStateToProps,
    { fetchData },
    null,
    { forwardRef: true }
  )(InfiniteTable);
  </code></pre>
  
  <p>However I'm getting this error when trying to use my component with a ref prop:</p>
  
  <blockquote>
    <p>Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?</p>
  </blockquote>
  
  <p>What am I doing wrong?</p>