title: How to apply a single ref to multiple elements like (<div>) ? React.js
body: <p>I want to useRef() in 4 div elements, the divs controls the slider of some images.
  the code is like this:</p>
  <pre><code>const slider = useRef()
  const slideLeft = () =&gt; {slider.current.scrollLeft = slider.current.scrollLeft - 500};
  const slideRight = () =&gt; {slider.current.scrollLeft = slider.current.scrollLeft + 500};
  
  
  &lt;&gt;
   &lt;BsChevronLeft onClick={slideLeft}/&gt;
     &lt;div ref={slider}&gt;
     //Images mapped in here
    &lt;/div&gt;
   &lt;BsChevronRight onClick={slideRight}/&gt;
       &lt;BsChevronLeft onClick={slideLeft}/&gt;
     &lt;div ref={slider}&gt;
     //Images mapped in here
    &lt;/div&gt;
   &lt;BsChevronRight onClick={slideRight}/&gt;
       &lt;BsChevronLeft onClick={slideLeft}/&gt;
     &lt;div ref={slider}&gt;
     //Images mapped in here
    &lt;/div&gt;
   &lt;BsChevronRight onClick={slideRight}/&gt;
       &lt;BsChevronLeft onClick={slideLeft}/&gt;
     &lt;div ref={slider}&gt;
     //Images mapped in here
    &lt;/div&gt;
   &lt;BsChevronRight onClick={slideRight}/&gt;
  &lt;/&gt;
  </code></pre>
  <p>But whenever I click the first slider or div it only effects the last slider element,
  Thanks in advance.</p>