title: How can I use forwardRef() in React?
body: <p>I'm currently receiving the following error in my React app:</p>
  <blockquote>
  <p>Function components cannot be given refs. Attempts to access this ref
  will fail. Did you mean to use React.forwardRef()?</p>
  </blockquote>
  <p>How can I fix this using forwardRef()?</p>
  <p>My code is as follows:</p>
  <pre><code>const Services: FunctionComponent = (): ReactElement =&gt; {
    const servicesRef = useRef(null);
  
    return (
      &lt;Layout&gt;
        &lt;ServicesList ref={servicesRef} /&gt;
      &lt;/Layout&gt;
    );
  };
  export default Services;
  
  
  
  const ServicesList: React.FunctionComponent = ({ children }: Props) =&gt; {
    return (
      &lt;section className=&quot;my-24 md:my-32&quot;&gt;
        {children &amp;&amp; children}
      &lt;/section&gt;
    );
  };
  
  export default ServicesList;
  </code></pre>