Изменение имен объектов в массиве React

Всем привет, это снова я со своим react'ом

App.js

import React, {
  useState
} from "react";
import Modal from "./Modal/Modal";
import Tables from "./Tables/Tables";
import './App.css';




function App() {
  
  const [Products, setProducts] = useState([{
      name: "one",
      count: "1",
      id: 1
    },
    {
      name: "two",
      count: "1",
      id: 2
    },
    {
      name: "third",
      count: "2",
      id: 3
    }
  ]);

 
const deleteProduct = (product) => {
  setProducts(Products.filter(p => p !== product));
};

  const addProduct = (product) => {
    setProducts([...Products, product]);
  };

 
  return ( <div>
    <h1 style = {{textAlign: "center"}}> 
      Product 
    </h1>
    <Tables Products = {Products} delete={deleteProduct}/>
    <Modal add = { addProduct}/>
    
    </div>
  );
}

export default App;

Modal.js

import React from "react";
import Tables from "../Tables/Tables";
import './Modal.css'

class idGenerator{
    static id=3;
    static next(){
      return ++this.id;
    }
  }
  

export default class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false
    };
    this.nameInput = React.createRef();
    this.countInput = React.createRef();
    this.addHandler = this.addHandler.bind(this);
  }


  
  addHandler() {
    const name = this.nameInput.current.value;
    const count = this.countInput.current.value;
    this.props.add({ name, count,id:idGenerator.next() })
    
    this.setState({ isOpen: false });
  }

  render() {
    
    return (
        
      <React.Fragment>
        
        <button
          style={{ left: "40%", position: "relative" }}
          onClick={() => this.setState({ isOpen: true })}>
          Open modal
        </button>

        {this.state.isOpen && (
          <div className="modal">
            <div className="modal-body">
              <h1>Product</h1>
              <p>Name</p>
              <input ref={this.nameInput} type="text" />
              <p>Count</p>
              <input ref={this.countInput}  type="number" />

              
              <button onClick={this.addHandler}>Add</button>
            </div>
          </div>
        )}
         
      </React.Fragment>
    );
  }
}

Table.js

import React, {useState} from "react";
import '../App.js';
import './Tables.css';
import Modal from "../Modal/Modal";



function Tables (props) {
    
    
   
   

    return (
        
        <div>
            
        <table>
            <tbody>
            <tr>
                <td>
                Product
                </td>
                <td>
                Count
                </td>
            </tr>
            {props.Products.map((item,id)=><tr key={item.id}>
                <td>{item.name}  </td>
                <td>{item.count}</td>
                <button onClick ={() => {props.delete(item)} }>Delete</button>

                </tr>)}
    
            
                </tbody>
                </table> 
            
            

        </div>
    )
}

export default Tables

В общем, есть три файла. Помогите пожалуйста с тем, чтобы по нажатию на кнопку edit была возможность редактировать название элемента в массиве и количество. Пыталась перенести modal.js в table.js, но не знаю как можно модернизировать его так, чтобы он корректно вылазил и при выполнении не добавлял новую строку в таблицу, а только ее изменял. При этом всем надо оставить функционал с добавлением элементов и их редактиванием. Help please!