onthis step, "No" is preselected and I have to click on that "No " optio

src/components/cost-estimator/step-7-illustrations.tsx

@@ -1,3 +1,4 @@
+
 "use client";
 
 import type { FormData, IllustrationSelection } from './cost-estimator-form';
@@ -56,46 +57,56 @@ const calculateHours = (
 
 export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: Step7Props) {
   const [selections, setSelections] = useState<IllustrationSelection>(formData.illustrations);
-  const [noIllustrations, setNoIllustrations] = useState(false);
+  const [noIllustrations, setNoIllustrations] = useState(
+    !formData.illustrations.has2d && !formData.illustrations.has3d
+  );
 
   useEffect(() => {
-    const no2d = !selections.has2d || selections.is2dAnimated === null;
+    onUpdateData({ illustrations: selections });
-    const no3d = !selections.has3d || selections.is3dAnimated === null;
+  }, [selections, onUpdateData]);
-    const noIllustrationsSelected = !selections.has2d && !selections.has3d;
-    setNoIllustrations(noIllustrationsSelected);
-  }, [selections]);
 
-  const handleUpdate = (newSelections: Partial<IllustrationSelection>) => {
+  const handle2dCheck = (checked: boolean) => {
-    const updated = { ...selections, ...newSelections };
+    setSelections(prev => ({
-    setSelections(updated);
+      ...prev,
-    onUpdateData({ illustrations: updated });
+      has2d: checked,
-    if(updated.has2d || updated.has3d) {
+      is2dAnimated: checked ? prev.is2dAnimated || 'static' : null,
+    }));
+    if (checked) {
+      setNoIllustrations(false);
+    }
+  };
+  
+  const handle3dCheck = (checked: boolean) => {
+    setSelections(prev => ({
+      ...prev,
+      has3d: checked,
+      is3dAnimated: checked ? prev.is3dAnimated || 'static' : null,
+    }));
+    if (checked) {
       setNoIllustrations(false);
     }
   };
 
   const handleNoIllustrationsChange = (checked: boolean) => {
     setNoIllustrations(checked);
-    if(checked) {
+    if (checked) {
-        const resetSelections = {
+      setSelections({
-            has2d: false,
+        has2d: false,
-            is2dAnimated: null,
+        is2dAnimated: null,
-            has3d: false,
+        has3d: false,
-            is3dAnimated: null,
+        is3dAnimated: null,
-        };
+      });
-        setSelections(resetSelections);
-        onUpdateData({ illustrations: resetSelections });
     }
+  };
+  
+  const handleUpdateRadio = (type: '2d' | '3d', value: 'static' | 'animated') => {
+      if (type === '2d') {
+          setSelections(prev => ({...prev, is2dAnimated: value}));
+      } else {
+          setSelections(prev => ({...prev, is3dAnimated: value}));
+      }
   }
 
-  const handle2dCheck = (checked: boolean) => {
-    handleUpdate({ has2d: checked, is2dAnimated: checked ? selections.is2dAnimated || 'static' : null });
-  };
-  
-  const handle3dCheck = (checked: boolean) => {
-    handleUpdate({ has3d: checked, is3dAnimated: checked ? selections.is3dAnimated || 'static' : null });
-  };
-
   const estimatedHours = useMemo(() => {
     return calculateHours(
       formData.pageCount, 
@@ -115,13 +126,13 @@ export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: S
         
         <div className="space-y-4 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
-                <Checkbox id="2d-illustrations" checked={selections.has2d} onCheckedChange={handle2dCheck} disabled={noIllustrations} />
+                <Checkbox id="2d-illustrations" checked={selections.has2d} onCheckedChange={handle2dCheck} />
                 <Label htmlFor="2d-illustrations" className="text-lg">Yes, I need eye-catching 2D illustrations</Label>
             </div>
             {selections.has2d && (
                 <RadioGroup 
                     value={selections.is2dAnimated || undefined}
-                    onValueChange={(value: 'static' | 'animated') => handleUpdate({ is2dAnimated: value })}
+                    onValueChange={(value: 'static' | 'animated') => handleUpdateRadio('2d', value)}
                     className="ml-6 space-y-2"
                 >
                     <div className="flex items-center space-x-2">
@@ -138,13 +149,13 @@ export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: S
 
         <div className="space-y-4 rounded-lg border p-4">
             <div className="flex items-center space-x-2">
-                <Checkbox id="3d-illustrations" checked={selections.has3d} onCheckedChange={handle3dCheck} disabled={noIllustrations} />
+                <Checkbox id="3d-illustrations" checked={selections.has3d} onCheckedChange={handle3dCheck} />
                 <Label htmlFor="3d-illustrations" className="text-lg">Yes, let's add some gorgeous 3D illustrations</Label>
             </div>
             {selections.has3d && (
                 <RadioGroup
                     value={selections.is3dAnimated || undefined}
-                    onValueChange={(value: 'static' | 'animated') => handleUpdate({ is3dAnimated: value })}
+                    onValueChange={(value: 'static' | 'animated') => handleUpdateRadio('3d', value)}
                     className="ml-6 space-y-2"
                 >
                     <div className="flex items-center space-x-2">