Are there any tools to debug why React render caused changes in the DOM?

I have a React project where a state change is causing a re-render. That’s expected, but the re-render is causing DOM elements to be removed and re-created, causing focus to be lost in a textbox. I was hoping I could use some debugging tool (possibly React Dev Tools) to figure out what part of the render is causing DOM elements to change. Alternatively, a way to manually compare the virtual dom before and after render might serve my needs (although that sounds a little bit tedious).

I understand that various factors could cause DOM elements to be replaced, such as a key prop. I just don’t know specifically what is causing the behavior in this case.

The React Dev Tools Profiler can tell me why a component in the tree re-rendered, but it doesn’t appear to tell me anything about the reconciliation that follows the render. Is there any tool that can help?