title: useRef to scroll horizontally don't work for a dynamic element
body: <p>I have a search field that adds tags to the left side, which after a certain number of tags added it shows overflow-x.
  I need that after adding a new tag, it scrolls to the right, showing the last searched tag.</p>
  <p>The code I made uses the useRef associated with the parent element, so that after inserting a new tag it calls a function that makes the scroll.</p>
  <p>The problem is that for some reason, regardless of the value I put in pixels for the scroll, it always reaches the penultimate element, it never reaches the end.</p>
  <p>I believe that when he activates the scroll the last element is not yet ready in the useRef, so the penultimate element would be the last one at the moment, but I still haven't found a way to get around this.</p>
  <p><strong>My code:</strong> <a href="https://codesandbox.io/s/nextjs-10-tailwind-2-0-forked-wergkg?file=/pages/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/nextjs-10-tailwind-2-0-forked-wergkg?file=/pages/index.js</a></p>
  <p>some predefined tags have already been added so that the overflow is already visible
  <a href="https://i.stack.imgur.com/zcNUn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zcNUn.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/6BaT5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6BaT5.png" alt="enter image description here" /></a></p>