diff --git a/js/containers/portal-dashboard/answer-compact.tsx b/js/containers/portal-dashboard/answer-compact.tsx
index 4b9da4a5..3f9f0f73 100644
--- a/js/containers/portal-dashboard/answer-compact.tsx
+++ b/js/containers/portal-dashboard/answer-compact.tsx
@@ -62,18 +62,19 @@ export class AnswerCompact extends React.PureComponent<IProps> {
           ? this.renderAnswer(answerType?.icon, iconId)
           : this.renderNoAnswer()
         }
-        {answerBadges.map(answerBadge => {
+        {answerBadges.map((answerBadge, index) => {
+          const key = `${answerBadge}-${index}`;
           switch (answerBadge) {
             case "audioAttachment":
-              return <AudioRecordingBadge className={css.audioAttachmentBadge} data-cy="answer-audio-attachment-badge" />;
+              return <AudioRecordingBadge key={key} className={css.audioAttachmentBadge} data-cy="answer-audio-attachment-badge" />;
             case "questionFeedback":
               if (!hideFeedbackBadges) {
-                return <QuestionFeedbackBadge className={css.feedbackBadge} data-cy="question-feedback-badge" />;
+                return <QuestionFeedbackBadge key={key} className={css.feedbackBadge} data-cy="question-feedback-badge" />;
               }
               break;
             case "feedbackAnswerUpdated":
               if (!hideFeedbackBadges) {
-                return <FeedbackAnswerUpdatedBadge className={css.feedbackBadge} data-cy="answer-updated-feedback-badge" />;
+                return <FeedbackAnswerUpdatedBadge key={key} className={css.feedbackBadge} data-cy="answer-updated-feedback-badge" />;
               }
               break;
           }
diff --git a/js/util/answer-utils.tsx b/js/util/answer-utils.tsx
index e987de05..95ccc850 100644
--- a/js/util/answer-utils.tsx
+++ b/js/util/answer-utils.tsx
@@ -136,7 +136,6 @@ export const getAnswerIconId = (answerType: any) => {
 export const getAnswerBadges = (answer: Map<string, any>, feedback: Map<string, any>): AnswerBadge[] => {
   const badges: Set<AnswerBadge> = new Set();
   const type = answer && answer.get("questionType");
-  const attachments = answer && answer.get("attachments");
 
   if (feedback && feedback.get("feedback") !== "") {
     if (feedbackValidForAnswer(feedback, answer)) {
@@ -146,16 +145,18 @@ export const getAnswerBadges = (answer: Map<string, any>, feedback: Map<string,
     }
   }
 
-  switch (type) {
-    case "open_response":
-      if (attachments) {
-        attachments.forEach((attachment: any) => {
-          if (attachment.get("contentType")?.startsWith?.("audio/")) {
-            badges.add("audioAttachment");
-          }
-        }, false);
-      }
-      break;
+  if (type === "open_response") {
+    let interactiveState: any;
+    try {
+      const reportState = JSON.parse(answer && answer.get("reportState"));
+      interactiveState = JSON.parse(reportState?.interactiveState);
+    } catch (e) {
+      interactiveState = undefined;
+    }
+
+    if (interactiveState?.audioFile) {
+      badges.add("audioAttachment");
+    }
   }
 
   return Array.from(badges);