in React remove element from list with callback function

I wanna make a project like “Google Keep” project but when remove element from Note list ,I faced a problem. I wrote a callback (remoteElement)and pass as probs(removeCallback) every Note Component.
and When I clicked button , element was removing from list with MoveTrashhandle() function

but I have a problem

example list have two elements. [“A”,”B”]

if first I remove “B” not be a problem. but

if first I remove “A” , I can’t remove “B”
and Trying to delete “A” from the list

Why Does this do ? , is callback function wrong ?

Note.js

    function Note({ children, removeCalback }, key) {
    const [note, setNote] = useState(children);
    const [fav, setfav] = useState(false);
    const dispatch = useDispatch();

    useEffect(() => {});

    const AddFavhandle = () => {
      dispatch(addFavorie(note));
      setfav(true);
    };
    const removeFavhandle = () => {
      setfav(false);
      dispatch(removeFavorite(note));
    };
    const MoveTrashhandle = () => {
      dispatch(addTrash(note));
      removeCalback(note);
    };

    return (
      <div className="d flex">
        <button
          onClick={() => {
            !fav ? AddFavhandle() : removeFavhandle();
          }}
          style={{ height: 20, width: 20, background: !fav ? "grey" : "yellow" }}
        ></button>
        <li>{children}</li>
        <button
          onClick={() => {
            MoveTrashhandle();
          }}
          className="bg-green-200"
        >
          MoveTrash
        </button>
      </div>
    );
  }
  export default Note;

ListComp.js

        function ListComp({ NoteStr }) {
      const [noteList, setnoteList] = useState([NoteStr]); //reducer a taşı
      const [continueBool, setContinueBool] = useState(false);

      useEffect(() => {
        !continueBool ? setContinueBool(true) : setnoteList([...noteList, NoteStr]);
      }, [NoteStr]);

      const removeElement = (item) => {
        console.log(item);
        const updatedList = noteList.filter((note) => note !== item);
        setnoteList(updatedList);
        console.log(noteList);
      };
      useEffect(() => {}, [noteList]);

      return (
        <div>
          {console.log("ListComp rendered")}
          {noteList && noteList.length > 0 ? (
            noteList.map((note, index) => (
              <>
                {console.log(note, "note")}
                <Note key={index} removeCalback={removeElement}>
                  {note}
                </Note>
              </>
            ))
          ) : (
            <li>Not bulunamadı</li>
          )}
        </div>
      );
    }

    export default ListComp

I would be glad if you help .Thanks.