React state gets reset to previous value between renders

I'm updating state(an array) onClick of a button, everything works fine for all the elements in the state array except for the last one which when updated quickly reset the state to its old value.

 <Button
      icon={<IconDeleteStroked />}
      type="danger"
      onClick={() => {
      Toast.success("Table deleted!");
      props.setTables((prev) => {
      return prev
           .filter((e) => e.id !== i)
           .map((e, idx) => ({ ...e, id: idx }));
      });
       setTableActiveKey("");
      }}
 ></Button>

setTables gets passed down from a parent component, and I'm tracking the tables by logging them in a useEffect
here you can see it get correctly updated to [] and then to [{...}]screenshot of useEffect logs

I tried using memo and useCallback( ik it's only for optimization:') ) to avoid rerenders that might reset the state.

What might be causing the problem and how can it be fixed?

Thanks in advance:)

Edit (added a minimal reproducible example): src

It's because your <Form> onChange is triggering when you click the delete button, and overwriting the deleted table update when it calls props.setTables(updatedTables);, since the references to tables in there doesn't know about the deleted table.