Updated part of the correction display for Writing

src/components/Solutions/Writing.tsx

@@ -12,19 +12,26 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
 	const [isModalOpen, setIsModalOpen] = useState(false);
 
 	const formatSolution = (solution: string, errors: {correction: string | null; misspelled: string}[]) => {
-		const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|"));
+		const misspelled = errors.map((x) => x.misspelled);
+		console.log({misspelled});
+		const errorRegex = new RegExp(errors.map((x) => `(${x.misspelled})`).join("|"), "g");
+		console.log(errorRegex.global);
 
 		return (
 			<>
-				{reactStringReplace(solution, errorRegex, (match) => {
-					const correction = errors.find((x) => x.misspelled === match)?.correction;
+				{solution.split(" ").map((word) => {
+					if (!misspelled.includes(word)) return <>{word} </>;
 
+					const correction = errors.find((x) => x.misspelled === word)?.correction;
 					return (
+						<>
 							<span
+								key={word}
 								data-tip={correction ? correction : undefined}
 								className={clsx("text-mti-red-light font-medium underline underline-offset-2", correction && "tooltip")}>
-							{match}
-						</span>
+								{word}
+							</span>{" "}
+						</>
 					);
 				})}
 			</>