diff --git a/src/HMSInput.js b/src/HMSInput.js
index 8270c58ad40fb9eaf6096c58bced567a49b59626..84d0eed6db4471362b1c344d2b0f832845ec0f9a 100644
--- a/src/HMSInput.js
+++ b/src/HMSInput.js
@@ -26,13 +26,15 @@ const StyledRoot = styled('div')({
 
 function HMSInput({ seconds, onChange }) {
   const [hms, setHms] = useState(secondsToHMSarray(seconds));
+  console.log('hms', secondsToHMSarray(seconds));
+  console.log('seconds', seconds);
 
   useEffect(() => {
     setHms(secondsToHMSarray(seconds));
   }, [seconds]);
 
   const someChange = (ev) => {
-    const newState = { ...hms, [ev.target.name]: Number(ev.target.value) };
+    const newState = secondsToHMSarray(Number(ev.target.value));
     setHms(newState);
     onChange(newState.hours * 3600 + newState.minutes * 60 + newState.seconds);
   };
diff --git a/src/utils.js b/src/utils.js
index 4984a531f096155f057aec2a545c7014379dbc63..1b79b86ed3fd39f54732d64085f9e0d3b68631e1 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -19,5 +19,9 @@ export function secondsToHMS(secs) {
 /** Split a second to [hours, minutes, seconds]  */
 export function secondsToHMSarray(secs) {
   const h = Math.floor(secs / 3600);
-  return [h, Math.floor(secs / 60) - h * 60, secs % 60];
+  return {
+    hours: h,
+    minutes: Math.floor(secs / 60) - h * 60,
+    seconds: secs % 60,
+  };
 }