Antd TimePicker-RangePicker's values cannot be changed / detected when initial values are set

Question

I have implemented TimePicker from antd and RangePicker like this:

import { TimePicker } from 'antd';
const { RangePicker } = TimePicker;

And I implemented it in a form for user to change the time value:

const [editForm] = Form.useForm();
const formValues = Form.useWatch([], editForm);  
const [editBoxVisible, setEditBoxVisible] = useState(false);
const [editingMealTimeName, setEditingMealTimeName] = useState(null);
const [editingMealTime, setEditingMealTime] = useState(null);

I have a function to fill in the initial value of the time picker(range picker) if there exists a value for timePeriod

<Button 
     type="link" 
     size="medium" 
     icon={<EditOutlined />} 
     onClick={() => handleEdit(record.name,  record.time)}
/>

const handleEdit = (name, timePeriod) => {
   
    setEditingMealTimeName(name);
    setEditingMealTime(timePeriod);
    setEditBoxVisible(true);

    editForm.setFieldsValue({
      name: name || "",
      timePeriod: timePeriod ? [moment(timePeriod[0], "HH:mm"), moment(timePeriod[1], "HH:mm")] : []
    });

  };

My Form is warped inside a Modal like this:

<Modal
   title="Edit Customized Meal Time"
   open={editBoxVisible}
   onCancel={handleEditCancel}
   maskClosable={false}
   footer={null}
>
   <Form 
      form ={editForm} 
      onFinish={handleEditSubmit}        
   >
       <Form.Item 
          label="Name" 
          name="name" 
          rules={[{ required: true }]} 
         >            
            <Input 
              style={{width:"70%"}}
            />
        </Form.Item>
        <Form.Item
          label="Time Period"
          name="timePeriod"
          rules={[{ required: true }]}
         >
          <RangePicker format="HH:mm" style={{ width: "70%" }} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">Save</Button>
        </Form.Item>
    </Form>
</Modal>

If there were initial values to the range picker, the values were displayed correctly in the range picker box.

However, whenever I tried to change the value, on the first change of the "from" time value:

1.The change could not be registered when the "Ok" button is clicked

2.Random value I could not find the pattern of

When attempting to change the "to" time value, it would somehow register a (I suspect) the "from" time value I had selected, or just any random time value earlier (smaller) than the one I was changing.

Though, when I cleared the values in the range picker, I could select the time and they would display / be registered correctly.

(https://i.stack.imgur.com/mfQJk.gif)

Apologies for any lack of conciseness, I'd be happy to provide more details if needed. Thank you!