`ref.blur()` leaves broken state if invoked on `onFocus` in `<Creatable />`

Description

There is a onFocus handler in a <Creatable/> component, inside of it we invoke ref.blur().

It blurs the component, but also leaves it in a broken state. The focus ring is still on, and the component is uneditable

const stateMachine = useRef()
return (
  <Creatable
    ref={stateMachine}
    onFocus={() => stateMachine.current.blur()}
  />
)

Reproduction: https://codesandbox.io/s/actual-creatable-6pq682

We "fixed" it by delaying the blur

const stateMachine = useRef()
return (
  <Creatable
    ref={stateMachine}
    onFocus={() => setTimeout(() => stateMachine.current.blur(), 500)}
  />
)

Reproduction: https://codesandbox.io/s/expected-creatable-8m869m

Start with the provided actual-creatable CodeSandbox and trace the focus path when its ref.blur() method is called from onFocus. Compare it with the delayed-blur reproduction; done means immediate blur leaves the component editable and removes the focus ring without requiring a timeout.