Extra text from the backend to the frontend

Forge Forge UI Kit and Custom UI
1

Hi,
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">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>React App Test</title>
	</head>
	<body>
		<noscript>You need to enable JavaScript to run this app.</noscript>
		<div id="root"></div>
			<table id="FdeT">
			<tbody>
			  <tr>
				<td id="A1">1</td>
				<td id="A2">2</td>
				<td id="A3">3</td>
			  </tr>
			</tbody>
		</div>
	</body>
</html>

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
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
Regards