MUI: The `styles` argument provided is invalid. function without a theme in the context. One of the parent elements needs to use a ThemeProvider - material-ui

Question

I am trying to build a table using mui-datatables in mui v5
What does this error mean?
index.js:1 MUI: The styles argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
NewsWatch.js
import React from "react";
import MUIDataTable from "mui-datatables";
const columns = ["Name", "Company", "City", "State"];
const data = [
["Joe James", "Test Corp", "Yonkers", "NY"],
["John Walsh", "Test Corp", "Hartford", "CT"],
["Bob Herm", "Test Corp", "Tampa", "FL"],
["James Houston", "Test Corp", "Dallas", "TX"],
];
const options = {
filterType: "checkbox",
};
const NewsTable = () => {
return (
<>
<MUIDataTable
title={"Employee List"}
data={data}
columns={columns}
options={options}
/>
</>
);
};
export default NewsTable;

Answer 1

MUI-Datatables lib depends heavily on #mui or(as known previously #material-ui), and it needs two important things to exist
Wrap your root components/pages with a theme provider from MUI
import { ThemeProvider } from "#mui/material";
import { responsiveFontSizes, createTheme } from "#mui/material";
export const themeOptions: ThemeOptions = {
// ... any theme customiztion you can write here
}
let theme = responsiveFontSizes(createTheme(themeOptions));
and wrap the root with the provider
<ThemeProvider theme={theme}>
{children}
</ThemeProvider>
Install the icons' library in your project(because it internally needs it)
yarn add #mui/icons-material # or npm i #mui/icons-material