TimePicker mui-x taking up entire width of screen when clicked on. How do I set the width?

Question

I've pretty much looked everywhere and have tried every solution posted I could find but nothing works. Can someone help me?

Screenshot:

Here is my code:

<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 },
          },
        },
      }}
    />
  )}
/>;