dotnetlooper

Просто передайте в Note функцию, которая принимает индекс элемента, а потом по индексу убирайте из массива нужный элемент (Ну или по id, как угодно)

<Note 
                removeElement={() => handleDelete(index)}
            />

А сама функция что-то вроде этого

const [notes, setNotes] = useState([тут ваши Notes])
  const handleDelete = (index) => {
    let newNotes = [...notes];
    newNotes[index].splice(index, 1);
    setNotes(newNotes);
  };

Вместо логического значения пусть будет идентификатор окна, которое надо открыть:

<button onClick={() => setModal('раз окно')}>1</button>
<button onClick={() => setModal('два окно')}>2</button>
<button onClick={() => setModal('три окно')}>3</button>
...
<Modal display={modal === 'раз окно'}>...</Modal>
<Modal display={modal === 'два окно'}>...</Modal>
<Modal display={modal === 'три окно'}>...</Modal>