React mui-datatable Element type is invalid

Question

I'm trying to build a basic mui-datatable component, but I'm getting the error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import React, { useState, useEffect } from "react";
import { MUIDataTable } from "mui-datatables";

export default function App() {
  const [deposits, setDeposits] = useState([]);

  useEffect(() => {
    async function fetchData() {
      let arr = [];
      for (let i = 0; i < 5; i++) {
        arr.push({
          name: "Test",
          total: i + 1
        });
      }
      setDeposits(arr);
    }
    fetchData();
  }, []);

  const columns = [
    { name: "name", label: "Name" },
    { name: "total", label: "Amount" }
  ];

  const options = {
    filterType: "dropdown",
    pagination: false,
    selectableRows: "none"
  };

  return (
    <div className="App">
      <MUIDataTable
        title="Test Table"
        data={deposits}
        columns={columns}
        options={options}
      />
    </div>
  );
}

Here is the sandbox: https://codesandbox.io/s/divine-breeze-jfymy?file=/src/App.js:0-827

Thanks

Answer 1

Import MUIDataTable without bracket like:

import MUIDataTable from "mui-datatables";

Here your codesandbox modified.