Material UI Date picker using default theme instead of custom theme

Question

I am using Material UI for my react project. I am unable to apply the default theme for the Date picker. It works for Textfields and other components. Cannot find much documentation on this either. I want the "MuiOutlinedInput" to be applied to my date picker too.

Anyone know how to fix this? Here is my custom theme for the entire project

const theme = createTheme({
  typography: {
    htmlFontSize: 10, //16
    fontSize: 14, //15
  },
  palette: {
    primary: {
      main: "#1D4659",
      // light: "rgba(0, 179, 190, 0.35)",
    },
    secondary: {
      main: "#1D4659",
    },
    error: {
      main: "#FF7236",
    },
    text: {
      primary: "#1D4659", //Brand / Midnight
      secondary: "#1D4659", //Brand / Space
    },
    info: {
      main: "#1D4659",
    },
    background: {
      default: "#ffffff", // ultra light grey
    },
    divider: "#F2F2F2",
  },
  overrides: {
    // Style sheet name ⚛️
    MuiInputBase: {
      input: {
        fontSize: "14px",
        lineHeight: "1.4rem",
      },
    },
    MuiFormControl: {
      marginNormal: {
        marginTop: 0,
        marginBottom: 0,
      },
      marginDense: {
        marginTop: 0,
        marginBottom: 0,
      },
    },
    
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "#CACACA",
          borderWidth: "1px",
        },
        "&:hover $notchedOutline": {
          borderColor: "#CACACA",
          borderWidth: "1px",
        },
        "&$focused $notchedOutline": {
          borderColor: "#1D4659",
          borderWidth: "1px",
        },
      },
      multiline: {
        padding: "1.1rem 1rem",
      },
      inputMultiline: {
        lineHeight: "20px",
      },
      input: {
        padding: "1rem",
        backgroundColor: "#fff",
        borderRadius: "4px",
      },
    },
  },
  
});