如何在React上使用Material-UI更改选定的表行背景

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

const MyTable = () => {
  const [selectedRow, setSelectedRow] = useState(null);

  const handleRowClick = (index) => {
    setSelectedRow(index);
  };

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>Header 1</TableCell>
          <TableCell>Header 2</TableCell>
          <TableCell>Header 3</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {data.map((row, index) => (
          <TableRow
            key={row.id}
            onClick={() => handleRowClick(index)}
            style={{ backgroundColor: selectedRow === index ? 'yellow' : 'white' }}
          >
            <TableCell>{row.column1}</TableCell>
            <TableCell>{row.column2}</TableCell>
            <TableCell>{row.column3}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
};

export default MyTable;