Runtime Error with react-data-table-component in React Application

I encountered a runtime error while trying to integrate react-data-table-component into my React application. The error seems to occur when I attempt to render the data table after fetching data from my API.

Here’s the code I’m using:

import React, { useEffect, useState } from "react";
import DataTable from "react-data-table-component";
import axios from "axios";

const InvitationsDataTable = () => {
  const [tableData, setTableData] = useState([]);

  const columns = [
    { name: "Nomor Undangan", selector: "nomor_undangan", sortable: true },
    { name: "Tanggal", selector: "tanggal", sortable: true },
    { name: "Waktu", selector: "waktu", sortable: true },
    { name: "Tempat", selector: "tempat", sortable: true },
    { name: "Agenda", selector: "agenda", sortable: true },
    { name: "Pemimpin", selector: "leader_name", sortable: true },
    { name: "Peserta", selector: "participants", sortable: true },
    { name: "Dokumen", selector: "documents", sortable: true },
  ];

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get("http://localhost:5000/api/invitations");
        const invitations = response.data.map((invitation) => ({
          ...invitation,
          tanggal: new Date(invitation.tanggal).toLocaleDateString(),
          waktu: `${invitation.waktu_mulai} - ${invitation.waktu_selesai}`,
          participants: JSON.parse(invitation.participants)
            .map((p) => p.name)
            .join(", "),
          documents: JSON.parse(invitation.documents)
            .map((d) => d.file_path)
            .join(", "),
        }));
        setTableData(invitations);
      } catch (error) {
        console.error("Error fetching invitations:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <DataTable
      title="Daftar Undangan"
      columns={columns}
      data={tableData}
      pagination
      keyField="invitation_id"
    />
  );
};

export default InvitationsDataTable;

And this is the error I’m encountering:

Uncaught runtime errors:
ERROR
t is not a function
TypeError: t is not a function
    at http://localhost:3000/static/js/bundle.js:68245:56
    ...

Context:

The error appears when I reload the page, and although it sometimes resolves after a second reload, the issue keeps recurring. My goal is to ensure that the data from the API can be accessed and displayed correctly in the data table.

Any suggestions on how to resolve this issue?