How to give secondary theme color to DatePicker

I am new to material UI and I was playing around with components but I got stuck in an issue.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<TextField type="email" name="email" id="email" label="Email" variant="outlined" color="secondary" required />

<DatePicker label="Basic date picker" />

<!-- end snippet -->

Just like how I gave a color prop and variant prop to the TextField component, I want to give DatePicker the same props but the typescript gives me an error saying color doesn't exist on this type. I opened the documentation. I found a slots prop but it didn't help either. I can apply color via CSS but I wanna do things the right way. Using CSS will be redundant. Any idea how I cant solve this issue?

I found out about the slotProps prop in the DatePicker and this fixed my problem. We can provide props to any element used in the DatePicker component. Check out the slotProps prop of MUI DatePicker

<!-- begin snippet: js false console: true babel: false -->

<!-- language: lang-html -->

<DatePicker
  label="Joining date"
  slotProps={{
    textField: {
      name: "joiningDate",
      id: "joiningDate",
      color: "secondary",
      required: true
    }
  }}
/>

<!-- end snippet -->