Here is my bad (ugly) workaround:

1. Pass the state object (myList) to the child in props object.

App.js

  function open(e, item, itemIndex) {
    setPropArgs({ ...propArgs, editThis: item, index: itemIndex, show: true, itemList: myList });
  }

2. Return the list back to the parent in save method call & use the passed variable instead of state.

MyEditor.js

    <Button type="button" onClick={(e) => props.save(edit, props.index, props.itemList)}>
      Save
    </Button>

App.js

  function save(edit, index, itemList) {
    // console.log(myList);
    const newList = [...itemList];
    newList[index] = edit;
    setMyList(newList);
    setPropArgs({ ...propArgs, show: false });
  }

This is bad because MyEditor shouldn't need to know anything about the parent, it doesn't read or edit the list at all & there shouldn't be a need to pass around a copy of the state that could become out of date (if I wasn't blocking with the canvas).

Okay... I found the answer that I was looking for. Thanks to Marco Nisi for this Answer to a very similar question that has not got much attention

My forked code solution here

The solution is to move the callback (save function) into be created when the canvas is shown instead of when the functional component is initialized creating a fresher clone of the state. I can still see this as being problematic if you have an example where the state is being updated in the background or if the off-canvas is not blocking other edits. Note: You don't need the callback defined in the open function but it does need to be added(replaced) to the props object there.

  function open(e, item, itemIndex) {
    save = (edit, index) => {
      console.log(myList);
      const newList = [...myList];
      newList[index] = edit;
      setMyList(newList);
      setPropArgs({ ...propArgs, show: false });
    };
    setPropArgs({
      ...propArgs,
      editThis: item,
      index: itemIndex,
      show: true,
      save: save
    });
  }