title: ScrollIntoView behavior smooth is broken in react
body: <p>I have a table with multiple rows, each row has a button and on clicking of any of those button i want it to scroll to top and some how i have achieved it but the scroll is not smooth, its directly jumping on that div, i've used multiple npm libraries, polyfill(suggested by chrome team on github issues), used window object, tried changing in <code>chrome://flags</code>(enabling smooth scroll) but any of that is not working...
  if i'm using it without <code>({behavior: "smooth"})</code>, it directly jumps on it and when i use <code>({behavior: "smooth"})</code> it broken like scrolling to top(like for 1mm) for like 100ms and then stops like a lag.  </p>
  
  <p>PLEASE HELP!!!</p>
  
  <pre><code>smoothscroll.polyfill();
  
  const top = useRef();
  const Component=()=&gt;{
    const scrollToTop = () =&gt; {
      top.current.scrollIntoView({
        behavior: "smooth"
      });
    };
  
    const list=()=&gt; (
      data.map((item)=&gt; {
        return(
          &lt;Row&gt;
            &lt;Column&gt;
              {data.id}
            &lt;/Column&gt;
            &lt;Column&gt;
              {data.name}
            &lt;/Column&gt;
            &lt;Column&gt;
              {data.section}
            &lt;/Column&gt;
            &lt;Column&gt;
              &lt;button onClick={()=&gt;scrollToTop()}&gt;
                manage
              &lt;button&gt;
            &lt;/Column&gt;
          &lt;/Row&gt;
        );
      });
    )
  
    return (
      &lt;div ref="top"/&gt;
      {list()}
    );
  }
  </code></pre>