React не видит dom элемент внутри компонента

у меня есть код, который рендерит определенную верстку. Есть блок, куда вставляется рендер Если этот блок находится в index.html, то всё работает нормально, но если я этот блок перетаскиваю внутрь компонента, то выдает ошибку. Мне нужно, что бы этот блок был внутри компонента. Как это исправить?

Код:

 import React from 'react';
import ReactDOM from 'react-dom/client';
class MyApp extends React.Component {
    downloadTxtFile = () => {
      const element = document.createElement("a");
      const file = new Blob([document.getElementById('myInput').value], {type: 'text/plain'});
      element.href = URL.createObjectURL(file);
      element.download = "myFile.txt";
      document.body.appendChild(element); // Required for this to work in FireFox
      element.click();
    }
    
    render() {
      return (
        <div>
          <textarea id="myInput"></textarea>
          <button onClick={this.downloadTxtFile}>Download txt</button>
        </div>
      );
    }
  }
  const root = ReactDOM.createRoot(document.getElementById("myApp"));
  root.render(<MyApp />);

Код компонента:

import { useState} from 'react';
import './textDownload';
import './App.css';

function App() {
  
  const defaultCard = [
    {id:1,order:1,name: "Samat"},
    {id:2,order:2,name: "Arman"},
    {id:3,order:3,name: "Marat"},
    {id:4,order:4,name: ""},
    {id:5,order:5,name: ""},
    {id:6,order:6,name: ""},
    {id:7,order:7,name: ""},
    {id:8,order:8,name: ""},
    {id:9,order:9,name: ""},
    {id:10,order:10,name: ""},
    {id:11,order:11,name: ""},
    {id:12,order:12,name: ""},
    {id:13,order:13,name: ""},
    {id:14,order:14,name: ""},
    {id:15,order:15,name: ""},
    {id:16,order:16,name: ""},
    {id:17,order:17,name: ""},
    {id:18,order:18,name: ""},
    {id:19,order:19,name: ""},
    {id:20,order:20,name: ""},
    {id:21,order:21,name: ""},
    {id:22,order:22,name: ""},
    {id:23,order:23,name: ""},
    {id:24,order:24,name: ""},
    {id:25,order:25,name: ""},
    {id:26,order:26,name: ""},
    {id:27,order:27,name: ""},
    {id:28,order:28,name: ""},
    {id:29,order:29,name: ""},
    {id:30,order:30,name: ""},
    {id:31,order:31,name: ""},
    {id:32,order:32,name: ""},
  ]
  localStorage.setItem('default', JSON.stringify(defaultCard));
  const [cardList, setCardList] = useState(getStorage() 
  )
  const [currentCard, setCurrentCard] = useState(null)

  function dragStartHandler(e,card){
    if(!checkName(card)){
      e.preventDefault();
    } else{
      setCurrentCard(card); 
      
    }
  }
  function dragLeaveHandler(e){
    e.target.style.background = "#302501";
    e.target.classList.remove('anim')
  }
  function dragEndHandler(e){
  }
  function dragOverHandler(e){
    e.preventDefault(); 
    e.target.style.background = "#d6ca4b61";
    e.target.classList.add('anim')
    
  }
  function dragDropHandler(e,card){
    e.preventDefault();
    e.target.style.background = "#302501";
    setCardList(cardList.map( c => {
      if(c.id === card.id){
        
        return {...c, order:currentCard.order}
      }
      if(c.id === currentCard.id){
        
        return {...c, order:card.order}
      }
      // Put the object into storage

      // // Retrieve the object from storage
      return c;
    }))
    
  }
  const sortCards = (a,b) => {
    if(a.order > b.order){
      return 1;
    } else{
      return -1;
    }
  }
  function checkName(card){
    let check;
    if(card.name === ""){
      check = false;
    } else{
      check = true;
    }
    return check;
  }
  function addStorage (item){
    localStorage.setItem('cards', JSON.stringify(item));

  }
  function getStorage(){
    let result;
    if(localStorage.getItem('cards')){
      result = JSON.parse(localStorage.getItem('cards'))
    } else{
      result = JSON.parse(localStorage.getItem('default'))
    }
    return result;
  }

  
  return (
    <div className="container">
      <div className="wrapper">
        <h1 className="cards__title">VIP-места</h1>
        <div className="cards__inner">
          {cardList.sort(sortCards).map(card =>
            
            <div 
            // Момент взятия карточки
            onDragStart={(e)=> dragStartHandler(e,card)}
            // выход за пределы другой карточки 
            onDragLeave={(e)=> dragLeaveHandler(e)}
            // Отпущение перемещения
            onDragEnd={(e)=> dragEndHandler(e)}
            // Если находимся над другим объектом
            onDragOver={(e)=> dragOverHandler(e)}
            // Если отпускаем карточку и ожидаем действия
            onDrop={(e)=> dragDropHandler(e,card)}
            draggable={true}

            className="card">
            
            {addStorage(cardList)}
            {card.name}
            </div>
          )}
        </div>
      </div>  
    </div>
    
    

  );
}

export default App;