React-Paginate causing table component to throw react Hydration issue

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>
      ))}
  </>
);

}