在前幾天我們完成了資料的 CRUD、防呆與視覺設計。然而，如果現在隨意新增幾筆不同時間的藥物，會發現清單是依照「新增的時間先後」排列，而不是依照「應該服藥的時間」排列。這會讓使用者很難一眼看出「我接下來該吃什麼藥」。

今天，我們要利用 JavaScript 的 sort() 陣列方法，讓用藥清單自動根據 time 欄位進行由早到晚的排序。

Step 1：撰寫時間排序邏輯
打開 src/App.jsx。雖然我們可以在 MedicationList.jsx 裡渲染時再做排序，但為了維持資料的一致性（例如進度條或未來可能的其他元件也會用到），我們選擇在 App.jsx 傳遞資料前就先將其排好序。

在 App.jsx 中，我們不能直接對狀態 medications 使用 sort()，因為 sort() 會修改原陣列，這違反了 React 的不可變性原則。因此，我們要先利用展開運算子 [...medications] 複製一份新陣列，再進行排序。
在 return 區塊的上方，新增這段計算排序陣列的邏輯：


將部分原本的 medications 替換為排好序的 sortedMedications

Step 2：測試排序結果
進行測試：
1.試著新增一筆時間為 06:00 的藥物。
2.再新增一筆時間為 22:00 的藥物。
3.再新增一筆時間為 12:00 的藥物。