Extra text from the backend to the frontend

Using the custom UI with jira:projectPage
i always getting an extra line of text when i use getElementById(), i’ve stripped at maximum the code and the problem is always there

Here is my index.html in the project/static/prj_sta/public

<!DOCTYPE html>
<html lang="en">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>React App Test</title>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
			<table id="FdeT">
				<td id="A1">1</td>
				<td id="A2">2</td>
				<td id="A3">3</td>

and my app in project/static/prj_sta/src

import React, { useEffect, useState } from 'react';

function App() {

    return (
		  document.getElementById("A3").innerHTML = "A3",
		  document.getElementById("A1").innerHTML = "A1"

export default App;

and the output :

A1 2 A3 4 5 6

the 2 elements are changed so far so good, but i always have an extra first line with the last modified text

I’m a newbee in backent-frontend and i have tried a lot of example and didn’t find anything to help me
Any suggestion will be appreciated
Thanks in advance and sorry for the long post