How to remove an element from an array in React?

Question

React

I wrote a code to remove an array element, but it does not work correctly. After pressing the delete button, the element on which the button was pressed and all other elements in the array that come after the element on which the button was pressed are deleted. I’ll clarify right away that I have two components: a functional one, where the array itself is mapped and the delete function is located; class, where the code is written for each element of the array.
Element I delete through "slices".
Who fumbles, help!

Here is a piece of code from a functional component:

...
const [notes, setNotes] = React.useState([]);
...
function removeNote(index) {
    setNotes([...notes.slice(0, index), ...notes.slice(index + 1)]);
  }
...
return (
...
<div className="table__list">
        {notes.map((note, i) => (
          <Note 
            key={i} 
            id={i} 
            text={note}
            handleDeleteNote={() => removeNote(i)}
          />
        ))}
      </div>
...
);
...

Here is part of the code from the class component:

...
class Note extends React.Component {
  constructor(props) {
    super(props);

    this.id = props.id;
    this.text = props.text;
    this.notes = props.notes;
    this.removeNote = props.handleDeleteNote;
...
 render() {
    return (
...
<button className="removeBtn" onClick={this.removeNote}></button>
...
);}
...