React: Clicking a delete button nested inside a Div wrapped by a <Link/>

I am building my first React Notes-App to practice fundamentals and I have run into an issue involving my Delete Button inside of my < NoteDiv/>. When I click Delete, instead of deleting the < NoteDiv/>, it routes my browser to “/editnote/:id” since < NoteDiv/> is wrapped by <Link to={"/editnote/" + note.updated}>****< /Link> (reference: NoteList.js). Also, < NoteDiv/> has an editNoteHandler() onClick in the root div which I prevented from running by using e.stopPropagation() in my deleteHandler().

I was wondering if there was anyway around this issue? I was hoping e.stopPropagation() on my deleteNoteHandler() (reference: App.js) would also prevent the < Link/> from running since the Delete Button is a child element of < NoteDiv/>, which is a child-component of <Link to={"/editnote/" + note.updated}>, but that didn’t seem to work.

I am assuming using React Router for this case is probably not the best solution but I just wanted to practice React Router.
Typically I would just use the editNoteHandler() to open the note inside a < NewNote/>.

A more general question regarding React Router: What are some good use-cases for using React Router vs. an event-listeners for a SPA?

Thank you in advance!

-Charlie