Error: Invalid hook call while using MaterialTable

import React from 'react';
import AdminNavbar from '../../layout/AdminNavbar';
import SideMenu from '../../layout/SideMenu';
import MaterialTable from 'material-table';
const Dashboard = () => {
const tableCol = [
{
title: "Name", field: "name"
},
{
title: "Course", field: "course"
},
{
title: "Email", field: "email"
},
{
title: "Phone", field: "phone"
},
{
title: "Submitted at", field: "submit"
}
];
const tableData=[
{
name: "Wasim",
course: "Web Master",
email: "[email protected]",
phone: 9716689303,
submit:"01/12/2021",
feedback:"There should be more doubt sessions."
},
{
name: "Sahil",
course: "Web Master ",
email: "[email protected]",
phone: 9147235840,
submit:"02/02/2021",
feedback:"Depth Explanation"
}
,
{
name: "Ritik",
course: "Web Master ",
email: "[email protected]",
phone: 9716689453,
submit:"02/12/2021",
feedback:"Depth Explanation"
},
{
name: "Shweta",
course: "Web Premium",
email: "[email protected]",
phone: 9471358695,
submit:"03/12/2021",
feedback:"One-to-one doubt session"
},
{
name: "Rachna",
course: "Graphic Master",
email: "[email protected]",
phone: 9547183456,
submit:"04/12/2021",
feedback:"More Activities"
},
{
name: "Ankit",
course: "Animation",
email: "[email protected]",
phone: 9435281675,
submit:"05/12/2021",
feedback:"Slow and easy explanation"
},
{
name: "Amar",
course: "Animation",
email: "[email protected]",
phone: 7418349528,
submit:"06/12/2021",
feedback:"Easy explanation"
}
,
{
name: "Akshay",
course: "Graphics",
email: "[email protected]",
phone: 8516947256,
submit:"07/12/2021",
feedback:"Easy explanation & more exapmles"
}
];

return (
    <>
        <SideMenu/>
        <AdminNavbar />
        <div className="table-div">
             <MaterialTable title={"Student's Feedback"}
                data={tableData}
                columns={tableCol}
                options={{
                    headerStyle: {
                        backgroundColor: '#01579b',
                        color: '#FFF'
                    },
                    exportButton: true,
                    selection: false,
                    search: true
                }}
                detailPanel={[
                    {
                        
                        tooltip: 'Show Feedback',
                        render: rowData => {
                            return (
                                <div
                                    style={{
                                        fontSize: 20,
                                        textAlign: 'center',
                                        color: 'black',
                                        backgroundColor: '#eaeef3',
                                    }}
                                >
                                    {rowData.feedback}
                                </div>
                            )
                        },
                    }]}
            />
         </div>
    </>
);

}

export default Dashboard;