React state updating without setstate, takes on state of deleted item (SOLVED)

I have a React notes app that has a delete button, and a state for user confirmation of deletion. Once user confirms, the 'isConfirmed' state is updated to true and deletes the item from MongoAtlas and removes from notes array in App.jsx.

The problem is, the note that takes the index (through notes.map() in app.jsx I'm assuming) of the deleted notes position in the array has the 'isConfirmed' state set to true without calling setState. Thus, bugging out my delete button to not work for that specific note until page refresh.

I've included relevant code from my Delete Component:

function DeletePopup(props) {
const mountedRef = useRef();  //used to stop useEffect call on first render

const [isConfirmed, setIsConfirmed] = useState(false);
const [show, setShow] = useState(false);


function confirmDelete() {
    // console.log("user clicked confirm");
    setIsConfirmed(true);
    // console.log(isConfirmed);
    handleClose();
}

useEffect(() => {
    // console.log("delete useEffect() run");

    if (mountedRef.current) {
        props.deleteNote(isConfirmed);
    }

    mountedRef.current = true;
}, [isConfirmed]);

Note Component:

function Note(props) {

function deleteNote(isConfirmed) {
    props.deleteNote(props.id, { title: props.title, content: props.content }, isConfirmed);
    console.log("note.deleteNote ran with confirmation boolean: " + isConfirmed);
}

return <Draggable
    disabled={dragDisabled}
    onStop={finishDrag}
    defaultPosition={{ x: props.xPos, y: props.yPos }}
>
    <div className='note'>

        <h1>{props.title}</h1>
        <p>{props.content}</p>

        <button onClick={handleClick}>
            {dragDisabled ? <LockIcon /> : <LockOpenIcon />}
        </button>
        <EditPopup title={props.title} content={props.content} editNote={editNote} />
        <DeletePopup deleteNote={deleteNote} />

    </div>
</Draggable>
}

App Component:

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

function deleteNote(id, deleteNote, isConfirmed) {
    if (!isConfirmed) return;

    axios.post("/api/note/delete", deleteNote)
        .then((res) => setNotes(() => {
            return notes.filter((note, index) => {
                return id !== index;
            });
        }))
        .catch((err) => console.log(err));
}

return (
    <div id="bootstrap-override">
        <Header />
        <CreateArea
            AddNote={AddNote}
        />

        {notes.map((note, index) => {
            return <Note 
                key={index}
                id={index}
                title={note.title}
                content={note.content}
                xPos={note.xPos}
                yPos={note.yPos}
                deleteNote={deleteNote}
                editNote={editNote}
            />
        })}

        <Footer />
    </div>);
}

I've tried inserting log statements everywhere and can't figure out why this is happening. I appreciate any help, Thanks!

EDIT: I changed my Notes component to use ID based on MongoAtlas Object ID and that fixed the issue. Thanks for the help!