querySelectorAll can't find the element with custom attribute

Question

Update: I tested this code in a raw html/js and it works fine as said in the comments. This is a part of React App and I guess the problem should be in how application is loading this part of code. However for selecting other elements it's working fine.

I am trying to select all elements from a webpage which contain contenteditable attribute and it's set to true but querySelectorAll returns NodeList of 0 elements

HTML (from Editor component):

<div class="codex-editor">
   <div class="codex-editor__redactor" style="padding-bottom: 300px;">
       <div class="ce-block">
         <div class="ce-block__content">
           <h2 class="ce-header" contenteditable="true" data-placeholder="">Editor.js</h2>
         </div>
       </div>
   </div>
</div>

JavaScript

useEffect(() => {
    let matches = document.body.querySelectorAll('[contenteditable=true]'); 
    console.log(matches)
})



 return (
  <Editor
       tools={{
         header: Header,
         list: List,
         image: Image,
         delimiter: Delimiter
       }}
      holder="guest-editorjs"
      onChange={(data) => console.log(data)}
      onReady={() => console.log('Start!')}
      data={{data}} />
    )

Result in console: empty NodeList

Answer 1

Solution : This code works fine in a raw html/js. The problem was with React loading children component and that's why the content wasn't accessible.

Thanks all!