React : Canvas doen’t get returned as NULL in draw function

I am currenty reading code of Excalidraw and trying to understand how app works. I started from first commit and see that code

const rootElement = document.getElementById("root");

function drawScene() {
  ReactDOM.render(<App />, rootElement);
  const canvas = document.getElementById("canvas");
  
  const context = canvas.getContext("2d");
  }
drawScene();

Everything works fine ,but when I do my version

const root = ReactDOM.createRoot(document.getElementById("root"));    

    const drawScene = () => {   

    root.render(<App />);  
    
    const canvas = document.getElementById("canvas"); 
  
    const context = canvas.getContext("2d"); 
 }; 

 drawScene();

Canvas is NULL, but it renders. I understand that I use different version of React,but can you tell me and give me the link why in the first case canvas is normal value , in mine is Null.

the project was initially created 3 years ago and that version of react was used, now I use the last version of it. I understand that to write code the way is quite messy, but I follow commits and want to go step by step.