Fix few issues

frontend/src/components/domain/recipes/CreateRecipeModal.tsx

@@ -18,30 +18,33 @@ interface CreateRecipeModalProps {
  */
 // Custom Ingredients Component for AddModal
 const IngredientsComponent: React.FC<{
-  value: RecipeIngredientCreate[];
+  value: RecipeIngredientCreate[] | undefined | null;
   onChange: (value: RecipeIngredientCreate[]) => void;
   availableIngredients: Array<{value: string; label: string}>;
   unitOptions: Array<{value: MeasurementUnit; label: string}>;
 }> = ({ value, onChange, availableIngredients, unitOptions }) => {
+  // Ensure value is always an array
+  const ingredientsArray = Array.isArray(value) ? value : [];
+  
   const addIngredient = () => {
     const newIngredient: RecipeIngredientCreate = {
       ingredient_id: '',
       quantity: 1,
       unit: MeasurementUnit.GRAMS,
-      ingredient_order: value.length + 1,
+      ingredient_order: ingredientsArray.length + 1,
       is_optional: false
     };
-    onChange([...value, newIngredient]);
+    onChange([...ingredientsArray, newIngredient]);
   };
 
   const removeIngredient = (index: number) => {
-    if (value.length > 1) {
-      onChange(value.filter((_, i) => i !== index));
+    if (ingredientsArray.length > 1) {
+      onChange(ingredientsArray.filter((_, i) => i !== index));
     }
   };
 
   const updateIngredient = (index: number, field: keyof RecipeIngredientCreate, newValue: any) => {
-    const updated = value.map((ingredient, i) =>
+    const updated = ingredientsArray.map((ingredient, i) =>
       i === index ? { ...ingredient, [field]: newValue } : ingredient
     );
     onChange(updated);
@@ -62,14 +65,14 @@ const IngredientsComponent: React.FC<{
       </div>
 
       <div className="space-y-3 max-h-64 overflow-y-auto">
-        {value.map((ingredient, index) => (
+        {ingredientsArray.map((ingredient, index) => (
           <div key={index} className="p-3 border border-[var(--border-secondary)] rounded-lg bg-[var(--bg-secondary)]/50 space-y-3">
             <div className="flex items-center justify-between">
               <span className="text-sm font-medium text-[var(--text-primary)]">Ingrediente #{index + 1}</span>
               <button
                 type="button"
                 onClick={() => removeIngredient(index)}
-                disabled={value.length <= 1}
+                disabled={ingredientsArray.length <= 1}
                 className="p-1 text-red-500 hover:text-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
               >
                 <Trash2 className="w-4 h-4" />