Редактирование элемента списка с помощью модального окна (ReactJS)

Пишу приложение на Реакте. Нужно добавить одну фичу, которую не понимаю как реализовать

Логика приложения: Пользователь вводит в инпуты данны, нажимает кнопку Сабмит и введенные данные отображаются внизу в виде списка.

Мне нужно реализовать: кнопку Edit у элемента списка, чтоб при нажатии всплывало модальное окно с инпутом, где мы бы могли ввести какие-то изменения и сохранить их нажав кнопку Save в модальном окне

Мой код: Список элементов:

import React, { useState } from 'react';
import Card from '../UI/Card';
import Button from '../UI/Button';
import styles from '../Add/ParcelList.module.css'

const ParcelList = (props) => {


  return (
    <Card className={styles.parcel}>
        <ul>
            {props.parcels.map((parcel, index) => (
            <li key={parcel.id}>
                <ol>Parcel number: {index + 1}</ol>       
                <ol>Departure city: {parcel.departure}</ol>          
                <ol>Receiving city: {parcel.receiving}</ol>                
                <ol>Parcel type: {parcel.type}</ol>                     
                <ol>Date: ({parcel.date})</ol>
                <ol>Description: {parcel.description}</ol>
                <Button onClick={() => props.remove(parcel)}>Delete</Button>                   
            </li>
            ))}
        </ul>
    </Card>
  )
}

export default ParcelList;

App.js:

import React, { useState } from 'react'
import style from './index.module.scss'
import AddParcel from '../components/Add/AddParcel';
import ParcelList from '../components/Add/ParcelList';

const App = () => {
  const [parcelsList, setParcelsList] = useState([]);

  const addParcelHandler = (pDep, pRec, pType, pDate, pDes) => {
    setParcelsList(prevParcelsList => {
      return [...prevParcelsList, 
        { departure: pDep, receiving: pRec, type: pType, date: pDate, description: pDes, id: Math.random().toString() }]
    });
  };

  const removeParcel = (parcel) => {
    setParcelsList(parcelsList.filter (p => p.id !== parcel.id))
  }

  return (
    <div className={style}>
      <AddParcel onAddParcel={addParcelHandler}/>
      <ParcelList remove={removeParcel} parcels={parcelsList}/>
    </div>
  );
};