How can I change the border properties for an MUI Select component using ThemeProvider? I’m able to change the backgroundColor, but for some reason border properties like border and borderColor do not work.

App.js

import React from "react";
import {
  ThemeProvider,
  Box,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
} from "@mui/material";
import theme from "./theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box sx={{ minWidth: 200, margin: "5%" }}>
        <FormControl>
          <InputLabel id="demo-simple-select-label">Select Label</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            label="Select Label"
            variant="outlined"
            sx={{ minWidth: 200 }}
          >
            <MenuItem value={"1"}>Item 1</MenuItem>
            <MenuItem value={"2"}>Item 2</MenuItem>
            <MenuItem value={"3"}>Item 3</MenuItem>
          </Select>
        </FormControl>
      </Box>
    </ThemeProvider>
  );
}

export default App;

theme.js

import { createTheme } from "@mui/material";

const darkGrey = "#262626";
const mediumGrey = "#595959";
const lightGrey = "#adadad";
const white = "#ffffff";
const limeGreen = "3df730";

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        root: {
          backgroundColor: mediumGrey,
          border: "4px",
          borderColor: "red",
        },
      },
    },
    // This doesn't work either
    // MuiOutlinedInput: {
    //   styleOverrides: {
    //     root: {
    //       border: "4px",
    //       borderColor: limeGreen,
    //     },
    //   },
    // },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: white,
        },
      },
    },
  },
});

export default theme;