Ant design timepicker component does not update on change

I am using Ant Design’s timepicker component on a project of mine, to set the shift start and end time of a user. When a user is created, the start and end shift times are mandatory. And the user is able to see what time they have selected as a preview in the timepicker component (default expected behaviour), when they change the time in the timepicker.

However, when the user decides the change the shift time, a problem arises. They are not able to see the newly chosen time whenever they change the time. Only when they submit the form, and open it again, they are able to see the changed time. However, if they clear the timepicker and set an new time, or if they select the Now option in the timepicker, they are able to see the changes even if they change the time again normally after that.

To put it clearly, users are not able to see the changed time preview whenever they change the time. And it works normally when the field is cleared or the time is set to Now and the changed again.

I don’t know why this happens, please help me out.

      <Form.Item
        name="shift_start"
        label="Shift Start Time"
        rules={[
          { required: true, message: "Please select the shift start time." },
        ]}
      >
        <TimePicker
          format="HH:mm"
          use12Hours={false} // Ensure 24-hour format
          defaultValue={moment("00:00", "HH:mm")}
          value={moment(shiftStartTime, "HH:mm")}
          onChange={(time, timeString) => {
            console.log("Selected shift start time:", time, timeString);
            setShiftStartTime(timeString);
          }}
        />
      </Form.Item>

This is the form item with the shift start time.