In my app when I navigate to a specific page, then back to the page rendering my data table I get the following error:

app-index.js:32 Warning: Cannot update a component (`HotReload`) while rendering a different component (`DataTable`).

This has stumped me and I have tried various things to solve the issue... here are the related pages/components below, any help would be greatly appreciated!

Page.tsx with datatable:

import AccommodationDataTable from "@/components/modules/accommodation/accommodation-data-table";
import { Button } from "@/components/ui/button";
import { PlusCircle } from "lucide-react";
import Link from "next/link";

export default function AccomodationDashboardIndex() {
  return (
    <div className="p-8">
      <div className="max-w-3xl mx-auto">
        <div className="prose mb-8">
          <h1>Accomodation</h1>
          <p>
            On this page you can view all of the accomodations you have added to
            the site. You can also add new accomodations by clicking the "Add a
            new accomodation" button.
          </p>
        </div>
        <div className="mb-4">
          <Link href="/dashboard/accommodation/new">
            <Button variant="outline">
              Add a new accomodation <PlusCircle className="ml-2" />
            </Button>
          </Link>
        </div>
        <div>
          <AccommodationDataTable />
        </div>
      </div>
    </div>
  );
}