Занесение данных из массива в таблицу. React

Всем привет! Нужна помощь с занесением данных из массива в таблицу. Есть код:

import React from 'react';
import Modal from './Modal/Modal'

const products = [
  {
    count: '1',
    product: 'FirstProduct',
    key: 1
  },
  {
    count: '1',
    product: 'SecondProduct',  
    key: 2
  },
]
function App() {
  

  return ( 
   <div >
     <header></header>
     <h1 style={{textAlign: "center"}}>Тестовый магазин</h1>
     <div>
       <Modal/>
    <table>
     <tr>
       <th colspan="1">Наименование</th>
       <th>Количество</th>
     </tr>
         <tr>
       <td>Первый товар</td>
       <td>1</td>
         </tr>
         <tr>
       <td>Второй товар</td>
       <td>1</td>
         </tr>
     </table>
     </div>
     </div>
     );
}
export default App

Помогите сделать так, чтобы таблица забирала значения из массива, а так же была возможность вносить в дальнейшем из модалки новые элементы. При этом вносила их только в часть после наименования и количества, т.е сюда =>

По возможности разъясните как можно подробнее свой ответ, чтобы я смогла понять, а то гугл мне не особо помог)