I want to change the height of the datepicker and I have tried a lot of methods from sx to box style and none of them worked. I am wrapping it in a Box component for styling and when I inspect it in Dev tools, it says it's a Form component which makes sense. But changing the sx inside does not make any change too. I'm alright if the font size decreases, what should I do next to decrease the default height size?

code:

            <Box 
                mt={1.6}
                component="form"
                sx={{
                    '& > :not(style)': { 
                        m: 1, 
                        width: '27ch', 
                        height: 48,
                        backgroundColor: "white", 
                        borderRadius: 1,
                    },
                }}
                noValidate
                autoComplete="off"
                >
                    <LocalizationProvider dateAdapter={AdapterDateFns}>
                        <DesktopDatePicker
                            label="Clear Date"
                            inputFormat="MM/dd/yyyy"
                            value={value}
                            onChange={handleChange}
                            renderInput={(params) => 
                            <TextField 
                                {...params} 
                                variant="standard"
                                size="small"
                                sx={{ 
                                    px: 2, 
                                }}
                            />
                            }   
                        />
                    </LocalizationProvider>
                </Box>