Passing a function as prop through components is not working

Question

I am trying to pass a function as a prop into a functional React component. I keep getting the error This is not a function. The issue occurs in AddNote.js where I try to call it within handleSave(). It's weird because I'm following a tutorial so it absolutely should work but doesn't...

App.js

import Note from './Components/Note';
import NotesList from './Components/NotesList';
import { useState } from 'react';
import { nanoid } from 'nanoid';


const App = () => {

  const[notes, setNotes] = useState([
    {
      id: nanoid(),
      text: "My first note",
      date: "2/12/2024"
    },
    {
      id: nanoid(),
      text: "My second note",
      date: "2/13/2024"
    },
    {
      id: nanoid(),
      text: "My third note",
      date: "2/14/2024"
    },
    {
      id: nanoid(),
      text: "My fourth note",
      date: "2/15/2024"
  }])

  const addNote = (text) => {
        console.log(text);
  }

  return (
    <div className="container">
      <NotesList notes={notes} handleAddNote={addNote}/>
    </div>

  );
}

export default App;

NotesList.js

import Note from './Note';
import AddNote from './AddNote';

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

            <AddNote handleAddNote={handleAddNote}/>
        </div>
    );
}

export default NotesList;

AddNote.js

import { useState } from 'react';

const AddNote = ({ handleAddNote }) => {
    const [noteText, setNoteText] = useState("");

    const handleChange = (event) => {
        setNoteText(event.target.value);
    };

    const handleSave = () => {
        handleAddNote(noteText);
    };

    return(
        <div className="note new">
            <textarea 
                onChange={handleChange}
                value={noteText}
                className='new-note'
                rows="8" 
                columns="10" 
                placeholder="Type to add a note...">
            </textarea>

            <div className="note-footer">
                <small>200 remaining</small>
                <button className='save' onClick={handleSave}>Save</button>
            </div>
        </div>

    );
}

export default AddNote

Note.js

import {MdDeleteForever} from 'react-icons/md';

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

export default Note;

Here is the error message I get

AddNote.js:11 Uncaught TypeError: handleAddNote is not a function
    at handleSave (AddNote.js:11:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1
handleSave @ AddNote.js:11
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
Show 15 more frames
Show less