Here’s my App.js

import { useState } from "react";
import { nanoid } from "nanoid";
import NotesList from "./Components/NotesList";
import Search from "./Components/Search";
import Header from "./Components/Header";

const App = () => {
  const [notes, setNotes] = useState([
    {
      id: nanoid(),
      text: "This is my first note!",
      date: "05/28/2022",
    },
    {
      id: nanoid(),
      text: "This is my second note!",
      date: "05/28/2022",
    },
    {
      id: nanoid(),
      text: "This is my third note!",
      date: "05/28/2022",
    },
  ]);
  const [searchText, setSearchText] = useState("");

  const addNote = (text) => {
    const date = new Date();
    const newNote = {
      id: nanoid(),
      text: text,
      date: date.toLocaleDateString(),
    };
    const newNotes = [...notes, newNote];
    setNotes(newNotes);
  };
  const updateNote = (id, text) => {
    const updatedNote = {
      text: text,
    };
    const newNotes = notes.filter((notes) =>
      notes.id === id ? updatedNote : notes
    );
    setNotes(newNotes);
  };
  const deleteNote = (id) => {
    const newNotes = notes.filter((notes) => notes.id !== id);
    setNotes(newNotes);
  };
  return (
    <div className="container">
      <Header />
      <Search handleSearchNote={setSearchText} />
      <NotesList
        notes={notes.filter((note) =>
          note.text.toLowerCase().includes(searchText)
        )}
        handleAddNote={addNote}
        handleUpdateNote={updateNote}
        handleDeleteNote={deleteNote}
      />
    </div>
  );
};

export default App;

My Note.js

import { MdUpdate, MdDeleteForever } from "react-icons/md";

const Note = ({ id, text, date, handleDeleteNote, handleUpdateNote }) => {
  return (
    <div className="note">
      <span>{text}</span>
      <div className="note-footer"></div>
      <small>{date}</small>
      <MdUpdate
        onClick={() => handleUpdateNote(text)}
        className="delete-icon"
        size="1.3em"
      />
      <MdDeleteForever
        onClick={() => handleDeleteNote(id)}
        className="delete-icon"
        size="1.3em"
      />
    </div>
  );
};

export default Note;

And my NoteLIst.js

import Note from "./Note";
import AddNote from "./AddNote";

const NotesList = ({
  notes,
  handleAddNote,
  handleDeleteNote,
  handleUpdateNote,
}) => {
  return (
    <div className="notes-list">
      {notes.map((note) => (
        <Note
          id={note.id}
          text={note.text}
          date={note.date}
          handleUpdateNote={handleUpdateNote}
          handleDeleteNote={handleDeleteNote}
        />
      ))}
      <AddNote handleAddNote={handleAddNote} />
    </div>
  );
};

export default NotesList;

What I’m trying to do is establish an update button where a user can update their Note by clicking the update button. What am I missing that’s not allowing me to establish an updateNote feature? When you click on the update button, it just highlights the text on the notes section to the right of the note you click. !![Text](