mui datatables responsiveness issue in mobile

I am using mui-datatables@2.15.0 and @mui/material 5.9.1

I'm fixing bugs in existing project(actually code is written by someone else). MUIDataTable works properly in desktop view but in mobile view it breaks down and gives a ugly look

view in desktop

view in mobile

I want to show it in the mobile as it is in the desktop view with a horizontal scrollbar.

My code is here:

<MUIDataTable
            title={"Leave List"}
            data={data}
            columns={columns}
            options={{
              selectableRows: false,
              rowHover: false,
              filter: false,
              print: false,
              download: false,
            }}
          />

Columns data:

const columns = [
    {
      name: "_id",
      label: "Leave Id",
      options: {
        filter: true,
        sort: false,
        display: false,
      },
    },
    {
      name: "first_name",
      label: "First Name",
      options: {
        filter: true,
        sort: false,
      },
    },
    {
      name: "last_name",
      label: "Last Name",
      options: {
        filter: true,
        sort: false,
      },
    },

    {
      name: "leave_type",
      label: "Type",
      options: {
        filter: true,
        sort: false,
      },
    },
    {
      name: "date_start",
      label: "Start Date",
      options: {
        filter: true,
        sort: false,
      },
    },
    {
      name: "date_end",
      label: "End Date",
      options: {
        filter: true,
        sort: false,
      },
    },
    {
      name: "no_of_days",
      label: "No. of Days",
      options: {
        filter: true,
        sort: false,
      },
    },
    {
      name: "date_join",
      label: "Joining Date",
      options: {
        filter: true,
        sort: false,
      },
    },
    {
      name: "status",
      label: "Status",
      options: {
        filter: true,
        sort: false,
      },
    },
    {
      name: "actions",
      label: "Actions",
      options: {
        customBodyRender: (value, tableMeta) => {
          return (
            <>
              <VisibilityIcon
                color="action"
                fontSize="small"
                cursor="pointer"
                onClick={() => visiblityModal(tableMeta.rowData[0])}
              />
              <EditSharpIcon
                color="action"
                fontSize="small"
                cursor="pointer"
                onClick={() => updateModal(tableMeta.rowData[0])}
              />
              <DeleteIcon
                color="action"
                fontSize="small"
                cursor="pointer"
                onClick={() => deleteModal(tableMeta.rowData[0])}
              />
            </>
          );
        },
      },
    },
  ];