I am using MUI Mobile date range picker with 2 calendars. I want to change the color of the toolbar date text and want to remove the max-width so it does not have horizontal scroll.

Here is how it looks like right now

Here is the code

const MyActionBar = ({
  onCancel,
  className
}: PickersActionBarProps, onAccept: Function) => {
  return (
    <DialogActions className={className}>
      <Button onClick={onCancel} variant='contained'>Cancel</Button>
      <Button onClick={() => onAccept()} variant='contained'>Ok</Button>
    </DialogActions>
  );
};

const wrappedRenderDateRangeViewCalendar = (props: any) =>
  renderDateRangeViewCalendar({ ...props, calendars: 2 });

export default function CustomMobileDatePicker({
    open,
    setOpenMobilePicker,
    onAccept,
    value,
    onChange
}: {
    open: boolean;
    setOpenMobilePicker: Function;
    onAccept: Function;
    onChange: Function;
    value: DateRange<Dayjs>;
}) {
    const appTheme = useTheme();
    return (
        <LocalizationProvider dateAdapter={AdapterDayjs}>
            <MobileDateRangePicker
                open={open}
                onClose={() => setOpenMobilePicker(false)}
                onChange={(e) => onChange(e)}
                value={value}
                slots={{
                    textField: () => null,
                    fieldSeparator: () => null,
                    actionBar: (props) => MyActionBar(props, onAccept)
                }}
                slotProps={{
                    actionBar: { actions: ["cancel", "accept"] },
                    toolbar: { sx: { backgroundColor: appTheme.palette.primary.main } }
                }}
                maxDate={dayjs()}
                viewRenderers={{
                    day: wrappedRenderDateRangeViewCalendar
                }}
                sx={{
                    '& .MuiPickersToolbar-root': {
                        color: 'white'
                    }
                }}
            />
        </LocalizationProvider>
    );
}