如何使用材料表( react )滚动到特定页面中的特定行

import React, { useState, useEffect } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@material-ui/core';

const ScrollToRowTable = () => {
  const [scrollToIndex, setScrollToIndex] = useState(null);

  // 在组件挂载后滚动到指定行
  useEffect(() => {
    if (scrollToIndex !== null) {
      const element = document.getElementById(`row-${scrollToIndex}`);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }
  }, [scrollToIndex]);

  const handleScrollToRow = (index) => {
    setScrollToIndex(index);
  };

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>行号</TableCell>
            <TableCell>内容</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row, index) => (
            <TableRow key={index} id={`row-${index}`}>
              <TableCell>{index}</TableCell>
              <TableCell>{row.content}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default ScrollToRowTable;

const App = () => {
  return (
    <div>
      <button onClick={() => handleScrollToRow(5)}>滚动到第5行</button>
      <ScrollToRowTable />
    </div>
  );
};

export default App;