Extra box in TextField type=Date | Material UI

I have looked into a lot of things to make sure I don't see a box within a box (see screenshot). But, anything I do cannot get rid of this box. I am using material UI version: "@mui/material": "^5.16.1"

where is this my date field look like:

import {
  TextField,
} from "@mui/material";

<TextField
    label="From Date"
    type="date"
    value={formattedFromDate}
    onChange={(e) => updateBlock(index, "fromDate", e.target.value)}
    InputLabelProps={{ shrink: true }}
    margin="normal"
    variant="outlined"
/>

Any ideas?

Edit: No css class.

I don't want to use Date picker from material UI as that involves me updating to the next version of material UI and that will break my other dependencies.

After lot of trial and error, I was able to fix the issue. The inner box in the date picker is the default behavior of Material-UI's TextField with type="date". So I overrode the underlying MUI styling using:

import { makeStyles } from "@mui/styles";

const useStyles = makeStyles({
  dateInput: {
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        border: "none", // Remove the border of the inner box
      },
    },
  },
});

const classes = useStyles();

<TextField
    className={classes.dateInput}
    label="From Date"
    type="date"
    value={formattedFromDate}
    onChange={(e) => updateBlock(index, "fromDate", e.target.value)}
    InputLabelProps={{ shrink: true }}
    margin="normal"
    variant="outlined"
/>