React-Paginate causing table component to throw react Hydration issue - html

Question

I'm having an issue where my table component is throwing due to the React-Paginate package having a list for the pagination, a UL cannot be a child of a <tbody/ tag, causing React to throw a hydration error whenever I reload the page, this is my component code below, and below that is also my Items code, which is what paginated items renders for each item in the array.
<table className="table-auto w-full">
<thead>
<tr>
<th className="p-1 whitespace-nowrap float-left">
{headers[0]}
</th>
<th className="p-1 whitespace-nowrap">
<p className="float-right">{headers[1]}</p>
</th>
</tr>
</thead>
<tbody>
<PaginatedItems itemsPerPage={paginateItemsNum} />
</tbody>
</table>
Items Code:
function Items({ currentItems }) {
return (
<>
{currentItems &&
currentItems.map((item) => (
<tr key={item.Id}>
<td className="p-2 whitespace-nowrap">
<div className="flex items-center">
<div className="font-medium text-black float-left">
{item.Name}
</div>
</div>
</td>
<td className="p-2 whitespace-nowrap">
<div>
<div className="font-medium text-black float-right">
{item.EnabledString}
</div>
</div>
</td>
</tr>
))}
</>
);
}