해당 행의 아무 곳이나 마우스를 가져갈 때 TableRow 열의 아이콘 색상을 변경할 수 있습니까?

material-ui 4.9.5를 사용하고 있습니다.

여기에 내 문제의 예를 들어 보았습니다. 나는이 Table내가 몇 가지 간단한의 JSON 데이터로 채울 수있는합니다. 각 행 데이터는 다음과 같습니다.

{
      icon: {
         {
              iconElement: FolderIcon,
              color: "red",
              hoverColor: "green"
         }
      },
      projectName: "Project1"
}

따라서 각 행은 고유 한 아이콘과 고유 한 색상 및 호버 색상을 가질 수 있습니다.

내가 정말로 난처한 것은 사용자가 해당 행 내에서 아무 곳이나 마우스를 가져갈 때 개별 아이콘의 호버 색상을 트리거하는 방법입니다.

행에 대한 호버 트리거가 있고 호버시 배경 변경을 트리거합니다. 마우스 오버시 아이콘을 변경하는 방법을 알 수 없습니다. 이것이 내가 지금까지 가지고있는 것입니다.

import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles({
  rowIconStyle: {
    minWidth: 50,
    minHeight: 50
  },
  tableRowStyle: {
    cursor: "pointer",
    "&:hover": {
      backgroundColor: "darkGrey"
    }
  }
});

export default function MyTableComponent(props) {
  const styles = useStyles();
  const DEFAULT_TABLE_ROW_ICON_COLOR = "grey";
  return (
    <TableContainer component={Paper}>
      <Table aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Icon</TableCell>
            <TableCell>Name</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.tableRowsData.map(row => {
            const RowIcon =
              row.icon && row.icon.iconElement
                ? row.icon.iconElement
                : () => <div />;
            let iconElement = (
              <RowIcon
                className={styles.rowIconStyle}
                style={{
                  color:
                    row.icon && row.icon.color
                      ? row.icon.color
                      : DEFAULT_TABLE_ROW_ICON_COLOR
                }}
              />
            );
            return (
              <TableRow key={row.name} className={styles.tableRowStyle}>
                <TableCell>{iconElement}</TableCell>
                <TableCell>{row.projectName}</TableCell>
              </TableRow>
            );
          })}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

MyTableComponent.propTypes = {
  tableRowsData: PropTypes.array
};

어떤 제안이라도 대단히 감사합니다.