Updated a problem with the rendering of the Solutions

src/components/Solutions/MatchSentences.tsx

@@ -74,21 +74,22 @@ export default function MatchSentencesSolutions({
 							</div>
 						))}
 					</div>
-					{sentences.map((sentence, index) => (
-						<Xarrow
-							key={index}
-							start={sentence.id}
-							end={sentence.solution}
-							lineColor={
-								!userSolutions.find((x) => x.question === sentence.id)
-									? "#CC5454"
-									: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
-									? "#7872BF"
-									: "#CC5454"
-							}
-							showHead={false}
-						/>
-					))}
+					{userSolutions &&
+						sentences.map((sentence, index) => (
+							<Xarrow
+								key={index}
+								start={sentence.id}
+								end={sentence.solution}
+								lineColor={
+									!userSolutions.find((x) => x.question === sentence.id)
+										? "#CC5454"
+										: userSolutions.find((x) => x.question === sentence.id)?.option === sentence.solution
+										? "#7872BF"
+										: "#CC5454"
+								}
+								showHead={false}
+							/>
+						))}
 				</div>
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">