If you're building a tool used in B2B, data curation, or internal tooling uses, I highly recommend creating or finding an interface for confirmation dialogs whose invocation is as simple as `await confirm("...")`. You can even have a hook that lets you memoize and wrap a callback with this, perhaps even making it easy to condition on having unsaved changes. Have it mount in a place that makes sense in your own setup (you can use context, or it can just mount outside your main React mount if you want to cheat), with styling that matches your design system.

You want to make the friction for colleagues to use this as low as possible, so that it will be used by default for dangerous actions, without cluttering your business logic!

(Of course, in implementing such a thing, a state machine is a great choice, and OP's article covers much of the complexity you'll need, though possibly using a library vs. a reducer is overkill!)