I see this error with the app, reported by NextJS, please fix it. The er

src/components/chatbot/chat-message.tsx

@@ -8,6 +8,7 @@ import { Bot, User, AlertTriangle, CheckCircle, Info } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
 import { MCQOptions } from './mcq-options';
 import type { GenerateMCQOutput } from '@/ai/flows/generate-mcq';
+import { useState, useEffect } from 'react';
 
 interface ChatMessageProps {
   message: ChatMessageType;
@@ -27,6 +28,13 @@ export function ChatMessage({
   const isUser = message.sender === 'user';
   const Icon = isUser ? User : Bot;
   const avatarFallback = isUser ? 'U' : 'AI';
+  const [formattedTime, setFormattedTime] = useState('');
+
+  useEffect(() => {
+    if (message.timestamp) {
+      setFormattedTime(message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
+    }
+  }, [message.timestamp]);
 
   const isCurrentActiveMCQMessage = 
     message.type === 'mcq' && 
@@ -60,7 +68,6 @@ export function ChatMessage({
           {message.type === 'mcq' && message.mcq && (
             <div className="space-y-2">
               <p className="font-medium">{message.mcq.mcq}</p>
-              {/* Removed Badge rendering of options here */}
               {isCurrentActiveMCQMessage && onOptionSelectActiveMCQ && (
                 <div className="mt-3">
                   <MCQOptions
@@ -94,9 +101,11 @@ export function ChatMessage({
              <p className="italic">You chose: "{message.text}"</p>
           )}
 
-          <p className={cn("mt-1.5 text-xs", isUser ? "text-primary-foreground/70" : "text-muted-foreground")}>
-            {message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-          </p>
+          {formattedTime && (
+            <p className={cn("mt-1.5 text-xs", isUser ? "text-primary-foreground/70" : "text-muted-foreground")}>
+              {formattedTime}
+            </p>
+          )}
         </CardContent>
       </Card>
       {isUser && (