update time formatting in message component

src/components/message.jsx

@@ -1,9 +1,16 @@
-import getFormattedTime from '@/utils/getFormattedDate'
+import { useEffect, useState } from 'react'
+import { timeFormatter } from '@/utils/getFormattedDate'
 import Image from 'next/image'
 import Link from 'next/link'
 
 export default function Message({ sentAt, children }) {
+  const [time, setTime] = useState(0)
   const { format: formatTime } = timeFormatter()
+
+  useEffect(() => {
+    setTime(formatTime(sentAt))
+  }, [sentAt, formatTime])
+
   return (
     <div className="flex items-end gap-2">
       <Link className="rounded-full overflow-hidden" href="/">