remove useState and useEffect

src/components/message.jsx

@@ -1,16 +1,10 @@
-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="/">
@@ -24,7 +18,7 @@ export default function Message({ sentAt, children }) {
       </Link>
       <div className="flex justify-between gap-2 rounded-lg rounded-bl-none w-fit max-w-md py-2 px-3 bg-orange-100">
         <p className="break-words">{children}</p>
-        <span className="text-xs self-end">{time}</span>
+        <span className="text-xs self-end">{formatTime(sentAt)}</span>
       </div>
     </div>
   )