Applying styles for DatePicker - MUI react

Question

I want to add DatePicker to my site from MUI X. I also want to add my own styles. Replace border-color, remove border-radius, change text and label color to white. (screenshot of the design below). I realized that many people face difficulty in styling components. I tried using sx, I accessed the elements through classes directly.

"& label": {
              color: "white",
            },

But when I tried to change the border-color strange things started to happen. When I hovered over the component, the border-color became black. Sometimes all the styles disappeared, as if I had not specified them. As a result, I want to know how to apply styles to MUI components and DatePicker in particular.

As I said above, I tried using sx and accessing the classes directly

<DatePicker
      label="Date"
      value={selectedDate}
      onChange={handleDateChange}
      renderInput={(params) => <TextField {...params} />}
      sx={{
        "& label": {
          color: "white",
        },
        "&:hover .MuiOutlinedInput-notchedOutline": {
          borderColor: "yellow",
        },
        ".Mui-focused": {
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: "red",
          },
        },
        ".css-1l0x3a7-MuiFormControl-root-MuiTextField-root .MuiOutlinedInput-root fieldset": {
          borderColor: "green",
        },
        ".css-1jy569b-MuiFormLabel-root-MuiInputLabel-root.Mui-focused": {
          color: "white",
        },
        ".MuiSvgIcon-root": {
          color: "white",
        },
      }}
    />