Features of returning multiple tags in JSX

You can't return multiple tags at once via return. That is, the following code won't work:

function App() {
	return (
		<div>
			<p>text1</p>
			<p>text2</p>
		</div>
		<div>
			<p>text3</p>
			<p>text4</p>
		</div>
	);
}

To make this work, we'll have to put our tags into some common tag, like this:

function App() {
	return (
		<div>
			<div>
				<p>text1</p>
				<p>text2</p>
			</div>
			<div>
				<p>text3</p>
				<p>text4</p>
			</div>
		</div>
	);
}

This technique will work, but it is not without its drawbacks: as a result of rendering, we will get an additional div, which we did not want in general and introduced solely for the correct operation of React. This div, for example, can break part of our layout.

To avoid such problems, React introduces a special empty tag that groups tags but does not get into the finished layout. Let's use this tag:

function App() {
	return (
		<>
			<div>
				<p>text1</p>
				<p>text2</p>
			</div>
			<div>
				<p>text3</p>
				<p>text4</p>
			</div>
		</>
	);
}

The author of the following code wants to return two ul tags at once:

function App() {
	return <ul>
		<li>text1</li>
		<li>text2</li>
		<li>text3</li>
	</ul>
	<ul>
		<li>text1</li>
		<li>text2</li>
		<li>text3</li>
	</ul>;
}

The code, however, does not work. Correct the error of the code author. Suggest two ways to solve the problem.