react useRefを使ってスクロール位置を調節したい

Question

buttonが押下された時にtopのスクロール位置を取得してrefを使いスクロール位置を調整したいです。
window.scrollは使わないようにしたいです。
わかる人いましたらご教授お願いしたいです。

const App = () => {
  const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  const ref = React.createRef<HTMLDivElement>();

  const scrollToTop = () => {
    ref.current.scrollTop = 0;
    console.log(ref?.current?.scrollTop);
  };

  return (
    <div style={{ display: "grid", gridTemplateColumns: "auto 1fr" }}>
      <div style={{ width: "300px" }}></div>
      <div>
        <div className="App" ref={ref}>
          {list.map((list) => (
            <div
              style={{
                height: "200px",
                background: "blue",
                marginBottom: "20px"
              }}
            >
              {list}
            </div>
          ))}
          <button onClick={scrollToTop}>button</button>
        </div>
      </div>
    </div>
  );
};

export default App;