Как остановить динамически добавляемые строки таблицы с использованием java script DOM-манипуляции с перекрытием содержимого под ним в React JS?

Question

В моем коде я добавил строки в таблицу по щелчку ссылки, используя манипуляции с DOM. У меня есть еще один div над таблицей с именем пользователя. Но когда я сопоставляю пользователей и нажимаю ссылку добавления, строки перекрывают следующий пользовательский div. Может ли кто-нибудь сказать мне, как освободить место для этих дополнительных строк, созданных автоматически, чтобы они не перекрывали следующий div.

Это код для добавления строк

 function add_fields(id) {


        var element= document.getElementById(id).insertRow(-1).innerHTML+=
         `<tr style="padding-bottom:20px">
<td><select class="Select-Rectangle" style=" width: 150px;height: 44px;border: solid 1px #9b9b9b;font-size:14px;font-family:Ubuntu"><option>Select BS</option></select></td><td><input type="text" name ="name"  style=" margin-left:22px;width: 150px;height: 44px;border: solid 1px #9b9b9b;font-size:14px;font-family:Ubuntu"  /></td ><td><input onchange="handleChange" type="text" name ="name"  style="margin-left:22px; width: 150px;height: 44px;border: solid 1px #9b9b9b;font-size:14px;font-family:Ubuntu"  /></td><td><input type="text" name ="name" style="margin-left:22px; width: 150px;height: 44px;border: solid 1px #9b9b9b;font-size:14px;font-family:Ubuntu" /></td><td><input type="text" name ="name"  style=" margin-left:22px; width: 150px;height: 44px;border: solid 1px #9b9b9b;font-size:14px;font-family:Ubuntu" /></td><td style= "margin-right: 17px;cursor: pointer"><Link> <img id="myImg" src="/static/media/bxs-check-circle.aa5b571d.svg"></img></Link></td><td style="margin-left:26px;margin-top:2px"><span style={{ margin-left: 26px;
         margin-top:2px" class="duRATION-000" >DURATION:0:00</span></td></tr>`;


        }

Вот jsx code

{BS.map((bs)=>{
  return(
    <div>
      <div style={{ marginTop: "35px" ,
                     marginLeft: "31px",
                    paddingTop:"15px",
                     display:"flex"
    }} className="Employee-Rectangle">
 <FontAwesomeIcon
        style={{fontSize:"20px",
                margin:"7px"
      }}
        icon={faUser} 
        /> 
        <span
        style={{margin:"8px 956px 11px 41px"}}
        className="Employee-Name">{bs.name}</span>

    </div>


      <div style={{ marginLeft: "31px", marginTop: "15px" }}>
        <Link 

        onClick={()=>{add_fields(bs.id)}}
        className="active" style={{ textDecoration: "none" }}>
          <span className="Add-BS">Add BS</span>
        </Link>
      </div>


<div style={{ marginLeft: "31px", marginTop: "17px",
 display: "flex", flexWrap: "nowrap" }}
        className="Select-Outer-Rectangle">
      <table id={bs.id}  style={{marginBottom:"33px"}}>

         <tr style={{ paddingBottom: "20px"}}>
      <td >
      <select
            style={{

              width: "150px",
              height: "44px",
              border: "solid 1px #9b9b9b",
                fontSize:"14px",
                fontFamily:"Ubuntu"
            }}
          >
            <option 
            value="Select BS"
            style={{
              width: "150px",
              height: "100%",
            }}
            >Select BS</option>
          </select>
      </td>
      <td >
      <input 
          type="text" 
         name="name"
            id="change"
          onChange={handleChange}
          style={{
            marginLeft:"22px", 
            width: "150px",
            height: "41px",
            border: "solid 1px #9b9b9b",
              fontSize:"14px",
              fontFamily:"Ubuntu"
          }}
          />
      </td>
      <td >
      <input 
          type="text" 
      name="name"
          onChange={handleChange}
          style={{
            marginLeft:"22px",
            width: "150px",
            height: "41px",
            border: "solid 1px #9b9b9b",
              fontSize:"14px",
              fontFamily:"Ubuntu"
          }}
          />
      </td>
      <td >
      <input 
          type="text" 
          name="name"
          onChange={handleChange}
          style={{
            marginLeft:"22px",  
            width: "150px",
            height: "41px",
            border: "solid 1px #9b9b9b",
              fontSize:"14px",
              fontFamily:"Ubuntu"
          }}
          />
      </td>
      <td >
      <input 
          type="text" 
          name="name"
          onChange={handleChange}
          style={{
            marginLeft:"22px", 
            width: "150px",
            height: "41px",
            border: "solid 1px #9b9b9b",
              fontSize:"14px",
              fontFamily:"Ubuntu"
          }}
          />
      </td>
<td id="imageTd" style={{ marginRight: "17px",
       cursor: "pointer" ,

       }}>

        <Link 
         id="imgLink"
         style={{textDecoration:"none",
         color:"#fbba21"
        }}
        onClick={handleSave}
        >
          <img id="myImg" src={require("../../assets/bxs-check-circle.svg")}/>

     </Link>

        </td >
<td style={{ marginLeft: "26px",
            marginTop:"2px"}}><span className="duRATION-000" >DURATION:0:00</span></td>
   </tr>
      </table>

      </div>
      </div>
  )
})}

Это изображение вывода, которое я получаю