当div在React中可见时，如何自动滚动到div？

import React, { useRef } from 'react';

function App() {
  const divRef = useRef(null);

  const scrollToDiv = () => {
    divRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div>
      <button onClick={scrollToDiv}>滚动到div</button>
      <div style={{ height: '1000px' }}>其他内容</div>
      <div ref={divRef}>需要滚动到的div</div>
      <div style={{ height: '1000px' }}>其他内容</div>
    </div>
  );
}

export default App;