How to Add Constraint With No Validation?

im building google keep clone i am having a problem in adding the edit button i have declared the function can anybody tell me the edit functtion

Harris

I am building a google keep clone, but have a problem in adding the edit button. I have declared the function, but don't know how to add its functionality.

import React, { useState } from "react";
import "./styles.css";

import Header from "./components/Header";
import CreateArea from "./components/CreateArea";
import Note from "./components/Note";
import Count from "./components/Count";
import Footer from "./components/Footer";

function App(props) {
const [notes, setNotes] = useState([]);

function addNote(newNote) {
setNotes((prevValue) => {
  return [...prevValue, newNote];
});
 }

function deleteNotes(id) {
setNotes((preValue) => {
  return [...preValue.filter((note, index) => index !== id)];
 });
   }
function editNote(id) {
setNotes((preValue) => {
  return [...preValue.filter((note,index) => index !== id)];
});
}
return (
<div className="App">
  <Header />
  <Count
    count={
      notes.length === 0
        ? "TAKE NOTES"
        : `Showing ${notes.length} TAKE NOTES`
    }
  />
  <CreateArea onAdd={addNote} />
  {notes.map((note, index) => (
    <Note
      key={index}
      id={index}
      title={note.title}
      content={note.content}
      onDelete={deleteNotes}
      onEdit={editNote}
    />
  ))}
  <Footer />
   </div>
    );
    }

  export default App;