MUI-X DateRangePicker custom text field

Question

I am using DateRangePicker component where users can select startDate and endDate. Additionally, users should also be able to select the time for startDate and endDate as well. I am using MultiSectionDigitalClock to allow users to select the Time. The problem is, I can't update the Time correctly because I can't find a way to differentiate between the textFields. There are 2 TextField components and not sure which is start and which is end. Here is the code

const TriggerAndDigitalClock = ({
  dateRange,
  onChange,
  ...props
}: React.PropsWithChildren<TextFieldProps> & {
  onChange: (
    newDate: React.Dispatch<React.SetStateAction<[Date | null, Date | null]>>,
  ) => void;
  dateRange: [Date | null, Date | null];
}) => {
  return (
    <Stack>
      <TextField {...props} />
      <MultiSectionDigitalClock
        value={dateRange[1]}
        onChange={(newDate) => onChange((pre) => [pre[0], newDate])}
      />
    </Stack>
  );
};

const DemoDateRangeAndTime = () => {
  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
    new Date(),
    new Date(),
  ]);

  return (
    <DateRangePicker
      value={dateRange}
      onChange={setDateRange}
      slots={{
        // eslint-disable-next-line react/no-unstable-nested-components
        textField: (props) => (
          <TriggerAndDigitalClock
            {...props}
            onChange={setDateRange}
            dateRange={dateRange}
          />
        ),
      }}
    />
  );
};

Current Behavior : When the time is updated, both Timefields get updated.

Expected Behavior : StartTimePicker should only update the StartTime. So is EndTime