Responsivenes Stacked not working

"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 (

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

return (
<>



);
};

export default MuiDataTable;

this realy needs to be fixed