diff --git a/src/components/ChatBox/index.jsx b/src/components/ChatBox/index.jsx
index 5013883..4dd12dd 100644
--- a/src/components/ChatBox/index.jsx
+++ b/src/components/ChatBox/index.jsx
@@ -28,12 +28,10 @@ const ChatBox = ({ messageList, chatboxContainerRef }) => {
 };
 
 ChatBox.propTypes = {
-  messageList: PropTypes.arrayOf(PropTypes.shape({
-    role: PropTypes.string.isRequired,
-    content: PropTypes.string.isRequired,
-    timestamp: PropTypes.instanceOf(Date).isRequired,
-  })).isRequired,
-  chatboxContainerRef: PropTypes.string.isRequired,
+  chatboxContainerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element)  }),
+  ]).isRequired,
 };
 
 export default ChatBox;
diff --git a/src/components/Message/index.jsx b/src/components/Message/index.jsx
index 8bd1ff5..9f5f776 100644
--- a/src/components/Message/index.jsx
+++ b/src/components/Message/index.jsx
@@ -7,13 +7,15 @@ const Message = ({ variant, message, timestamp }) => {
     return null;
   }
 
+  const parsedTimestamp = new Date(Date.parse(timestamp));
+
   return (
     <div
       className={`message ${variant} ${variant === 'user' ? 'align-self-end' : ''} text-left my-1 mx-2 py-1 px-2`}
       data-hj-suppress
     >
       {message}
-      <div className="time text-right pl-2">{`${timestamp?.getHours()}:${timestamp?.getMinutes()}:${timestamp?.getSeconds()}`}</div>
+      <div className="time text-right pl-2">{`${parsedTimestamp?.getHours()}:${parsedTimestamp?.getMinutes()}:${parsedTimestamp?.getSeconds()}`}</div>
     </div>
   );
 };
@@ -21,7 +23,7 @@ const Message = ({ variant, message, timestamp }) => {
 Message.propTypes = {
   variant: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
-  timestamp: PropTypes.instanceOf(Date).isRequired,
+  timestamp: PropTypes.string.isRequired,
 };
 
 export default Message;
diff --git a/src/data/thunks.js b/src/data/thunks.js
index 9b94e94..a0d28e5 100644
--- a/src/data/thunks.js
+++ b/src/data/thunks.js
@@ -11,10 +11,15 @@ import {
 export function addChatMessage(role, content) {
   return (dispatch, getState) => {
     const { messageList, conversationId } = getState().learningAssistant;
+
+    // Redux recommends only serializable values in the store, so we'll stringify the timestap to store in Redux.
+    // When we need to operate on the Date object, we'll deserialize the string.
+    const timestamp = new Date();
+
     const message = {
       role,
       content,
-      timestamp: new Date(),
+      timestamp: timestamp.toString(),
     };
     const updatedMessageList = [...messageList, message];
     dispatch(setMessageList({ messageList: updatedMessageList }));
@@ -33,7 +38,7 @@ export function getChatResponse(courseId) {
     const { messageList } = getState().learningAssistant;
     try {
       const message = await fetchChatResponse(courseId, messageList);
-      addChatMessage(message.role, message.content);
+      dispatch(addChatMessage(message.role, message.content));
     } catch (error) {
       dispatch(setApiError());
     }