Toggle Between Icons & Edit Table - React

Question

Actually I am facing three issues that is

1. I have used useState and trying to toggle between icons & button but vise versa is not happening
2. If I call the edit Icon it All table the Edit Icon are changing to other save button
3. Once I am on edit I need to target the paticular row only

All above three table will be handled by one change but How i am not sure

Here is the code

import React, { useState } from 'react';
import { ReactComponent as EditIcon } from '../../../assets/icons/edit-icon.svg';
import './ProductLineTable.css';
import { ReactComponent as AddIcon } from '../../../assets/icons/add-icon.svg';
import {
  Typography,
  Table,
  TableHead,
  TableRow,
  TableCell,
  TableContainer,
  TableBody,
  Button,
  Input,
  InputAdornment,
  TextField
} from '@material-ui/core';
export const data= [
  { id:1,Name:'test1',Class: 6Gender:'M'},
{ id:2,Name:'test1',Class: 6Gender:'M'},
{ id:3,Name:'test1',Class: 6Gender:'M'},
];

const Table = props => {
   const [isEdit, setIsEdit] = useState(false);
  const editClick=()=>{
    setIsEdit(true);
  }
  const cancelClick=()=>{
    setIsEdit(false);
  }
  return (
    <>
      <TableContainer className='product-line-table'>
        <Table>
            {data.map((k, index) => (
              <TableRow key={k.Id}>
                <TableCell>
                  <Typography>
                    {isEdit ? (
                      <TextField
                        data-test='firstname-input'
                        // label='Enter Product Code'

                        className='form-input user-search-textbox'
                        value={k.Name}
                        // onChange={e => {
                        //   handleChange(e, index, 'Product');
                        // }}
                      />
                    ) : (
                      k.Name
                    )}
                  </Typography>
                </TableCell>
                <TableCell>
                  <Typography>{k.Class}</Typography>
                </TableCell>
                <TableCell>
                  <Typography>{k.Gender}</Typography>
                </TableCell>
                <TableCell align='center'>
                  <Typography>
                    {isEdit ? (
                      <>
                        <Button
                          variant='contained'
                          color='primary'
                          size='small'
                          onClick={() => {                            
                            cancelClick
                          }}
                        >
                          Save
                        </Button>

                        <Button
                          color='secondary'
                          variant='outlined'
                          type='reset'
                          size='small'
                          className='user-reset-btn'
                          onClick={() => {
                            cancelClick
                          }}
                        >
                          Cancel
                        </Button>
                      </>
                    ) : (
                      <Button
                      onClick={editClick}
                      >
                        <EditIcon />
                      </Button>
                    )} 
                  </Typography>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
};

export default Table;