Is there a relationship between react re-rendering and DOM up-to-date

I checked that the input returned by a particular react component was drawn on the screen and found that input from the f12 console to the document.querySelector.
However, only null was returned, and it was not until the component returning that input was re-rendered that input was properly returned.

So even if an element is drawn on the screen, if the react component returning that element is not re-rendered, the dom is not updated?

I thought that the input is drawn on the screen, and I can check the input on the f12 console, so of course I can bring it to the document.querySelector.

To summarize, it’s like this

at F12 console,
document.querySelector(‘input[data-id=”test”]’) => null
after react componenet re-rendered
(There is no change in the screen due to the re-render of the react component)
document.querySelector(‘input[data-id=”test”]’) => input

how is it possible?

ps.
Of course, I know it’s a bad way to approach dom directly from React, but I couldn’t help it for personal business reasons.

document.querySelector(‘input[data-id=”test”]’) => input