onCompleted not called when useQuery refetch finished

Intended outcome:

Here is a brief, minimal outline of the inside of a React functional component I have:

const { refetch } = useQuery(MY_QUERY, {
  variables: {
    myVar
  },
  onCompleted: data => {
    console.log('on completed');
    sendAnEvent(false);
    setSomeState(data.foo.bar);
  },
});

function callback(event) {
  console.log('callback');
  refetch();
}

return (<div>
  <button onClick={ () => callback() }>Click me</button>
</div>);

What I expect is that, when I click the button:

1. The message callback is output to the console
2. The query is executed
3. The message on completed is output to the console
4. All the other onComplete actions execute

Actual outcome:

1. The message callback is output to the console
2. The query is executed
3. The message on completed is not output to the console and none of the other onComplete actions execute

How to reproduce the issue:

See this sandbox for a working minimal reproduction.

Version

@apollo/client: 3.0.0-beta4