Responsivenes Stacked not working

[bloodykheeng]

"mui-datatables": "^4.3.0",
"@mui/icons-material": "^5.14.7",
"@mui/material": "^5.14.7","react": "^17.0.1",
"react-dom": "^17.0.1",

Thats my enviroment ive noted stacked isnt working unless i have to put a FormControl component in my return even though am not using it if i remove it stacked stops rendering well in the ui

here is my whole component

import React from "react";
import MUIDataTable from "mui-datatables";
import { IconButton } from "@mui/material";
import VisibilityIcon from "@mui/icons-material/Visibility";
import EditIcon from "@mui/icons-material/Edit";
import DeleteIcon from "@mui/icons-material/Delete";
import FormControl from "@mui/material/FormControl";

// bk always remenber the stacked only works if there is a form control in the return

const MuiDataTable = ({ tableData, tableColumns, handleViewPage, handleShowEditForm, handleDelete }) => {
// Dynamically adding the Actions column
const columns = tableColumns.concat({
name: "Actions",
label: "Actions",
options: {
filter: false,
sort: false,
empty: true,
customBodyRenderLite: (dataIndex) => {
const dataRow = tableData[dataIndex];
return (

<IconButton onClick={() => handleViewPage(dataRow)}>


<IconButton onClick={() => handleShowEditForm(dataRow)}>


<IconButton onClick={() => handleDelete(dataRow)}>

);
},
},
});

const options = {
    filterType: "checkbox",
    responsive: "simple",
    selectableRows: "none", // set to 'multiple' if selection is needed
};

return (
    <>
        <FormControl></FormControl>
        <MUIDataTable title={"User List"} data={tableData} columns={columns} options={options} />
    </>
);

};

export default MuiDataTable;

this realy needs to be fixed