Inner Contradictions error display as snackbar

frontend/src/components/DesireForm.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { TextField, Button, Box, Typography, Snackbar, Alert } from '@mui/material';
 
 interface DesireFormProps {
     onSubmit: (desires: { wants: string[], accepts: string[], noGoes: string[], afraidToAsk: string }) => void;
+    externalError?: string | null;
 }
 
-const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
+const DesireForm: React.FC<DesireFormProps> = ({ onSubmit, externalError }) => {
     const [wants, setWants] = useState('');
     const [accepts, setAccepts] = useState('');
     const [noGoes, setNoGoes] = useState('');
@@ -14,6 +15,15 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
     const [alertMessage, setAlertMessage] = useState('');
     const [alertSeverity, setAlertSeverity] = useState<'error' | 'warning' | 'info' | 'success'>('error');
 
+    // Effect to handle external errors
+    useEffect(() => {
+        if (externalError) {
+            setAlertMessage(externalError);
+            setAlertSeverity('error');
+            setAlertOpen(true);
+        }
+    }, [externalError]);
+
     const handleCloseAlert = (event?: React.SyntheticEvent | Event, reason?: string) => {
         if (reason === 'clickaway') {
             return;