React error: "Each child in a list should have a unique "key" prop."

Hi I am getting an error that says "each child in a list should have a unique "key" prop. When I check the Components using React Developer Tools I don’t see any duplicates – what am I doing wrong?

  return (
    <>
    <Modal
        isOpen={modalIsOpen}
        onRequestClose={closeModal}
    >
      { modalIsOpen ? (
        <Note
        key={'ModalNote' + modalNote.id}
        id={modalNote.id}
        title={modalNote.title}
        text={modalNote.text}
        date={modalNote.date}
        deleteNote={deleteNote}
        closeNote={closeModal}
        />
      ) : ('')
      }
      
    </Modal>
    <div className="notesForm">
      <AddNote addNoteHandler={addNoteHandler}/>
    </div>
    <div className="notes">
      {notes.map((note) => (
        <>
        <Note
          key={note.id}
          id={note.id}
          title={note.title}
          text={note.text}
          date={note.date}
          deleteNote={deleteNote}
          closeNote={closeModal}
          openModal={openModal}
          modalIsOpen={modalIsOpen}
        />
        </>
      ))}
    </div>
    </>
  );

>Solution :

The keys are to be added to the outermost element returned from the map

Here in your e.g its the fragment <>, to add the key to the fragment you should be using <React.Fragment> for shorthand as shorter syntax doesn’t support keys

{notes.map((note) => (
        <React.Fragment key={note.id}>
        <Note
          key={note.id}
          id={note.id}
          title={note.title}
          text={note.text}
          date={note.date}
          deleteNote={deleteNote}
          closeNote={closeModal}
          openModal={openModal}
          modalIsOpen={modalIsOpen}
        />
        </React.Fragment>
      ))}