MUI X Time Picker点击后占满屏幕，如何设置宽度？

我已经查阅各类资料并尝试了所有能找到的解决方案，但均无效，望各位提供帮助。

截图：

我的代码如下：

<Controller
  name="startTime"
  control={control}
  rules={{ validate: validateTime }}
  render={({ field }) => (
    <TimePicker
      {...field}
      value={field?.value || null}
      format="HH:mm"
      name="startTime"
      ampm={false}
      minutesStep={15}
      label="24 hours"
      className="time-picker"
      slotProps={{
        textField: {
          sx: {
            borderRadius: 6,
            fieldset: { borderRadius: 6 },
            [`.${OutlinedInputClasses.root}`]: {
              height: 80,
              width: 300,
            },
            '& .MuiInputLabel-root': { lineHeight: 3 },
          },
        },
      }}
    />
  )}
/>;

内容的提问来源于stack exchange，提问作者Pat