Passing Data from React Table to a Input TextField Material ui

I've a react Table with multiple rows and 3 columns, every row has an edit button, when user clicks on the edit button of any row, i want the name data from that row to appear in the input textfield above. I've tried Ref and setting up the state but none of them are working, please help. Also, I've have a react-select field as well so please tell me if the same solution should apply to that? Here is the full code https://codesandbox.io/s/naughty-nobel-xboze

import React, { useState, useRef } from "react";
import TextField from "@material-ui/core/TextField";

import {
  Table,
  TableCell,
  TableBody,
  TableHead,
  TableRow
} from "@material-ui/core";
const data = [
  {
    id: 1,
    name: "tom1"
  },
  {
    id: 2,
    name: "tom2"
  },
  {
    id: 3,
    name: "tom3"
  },
  {
    id: 4,
    name: "mike"
  }
];
const Demo = () => {
  const key = useRef(null);
  const [word, setWord] = useState("");
  const focusText = (name) => {
    key.current.value = name;
  };




  return (
    <React.Fragment>
      <TextField
        style={{ width: "100%" }}
        id="outlined-basic"
        variant="outlined"
        value={word}
        size="small"
        color="primary"
        ref={key}
        onChange={e => {
          setWord(e.target.value);
        }}
      />
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>id</TableCell>
            <TableCell>name</TableCell>
            <TableCell>action</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{data.map(item => (
               <TableRow>
                   <TableCell align="left">
                        <p style={{ fontSize: "13px", margin: "0px" }}>{item.id}</p>
                   </TableCell>
                  <TableCell align="left">
                    <p style={{ fontSize: "13px", margin: "0px" }}>{item.name}</p>
                  </TableCell>
                    <TableCell>
                      <button onClick={() => focusText(item.name)}>edit</button>
                    </TableCell>
              </TableRow>
    ))}</TableBody>
      </Table>
    </React.Fragment>
  );
};
export default Demo;