如何同时滚动两个表？

Question

有两个表。当您尝试滚动其中之一时，滚动应该是另一张表上的触发器。如何实现？

 <Grid container>
      <Grid>
        <Table>
          <TableHead>
            <TableCell>value</TableCell>
            <TableCell>name</TableCell>
          </TableHead>
        </Table>
        <div style={{ ...styles.tableWrapper, overflow: "hidden" }}>
          <Table>
            <TableBody>
              {data1.map(item => (
                <TableRow>
                  <TableCell>{item.value}</TableCell>
                  <TableCell>{item.name}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </Grid>
      <Grid>
        <Table>
          <TableHead>
            <TableCell>value</TableCell>
            <TableCell>name</TableCell>
          </TableHead>
        </Table>
        <div style={styles.tableWrapper}>
          <Table>
            <TableBody>
              {data2.map(item => (
                <TableRow>
                  <TableCell>{item.value}</TableCell>
                  <TableCell>{item.name}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </Grid>
    </Grid>

Codesandbox示例https://codesandbox.io/s/angry-banzai-96r6n