diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/edit_job.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/edit_job.tsx
index d2780691e551d9..408e86512ed6dc 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/edit_job.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/edit_job.tsx
@@ -51,9 +51,9 @@ export const EditJob: FC<EditJobProps> = ({ job, jobOverride, existingGroupIds,
   );
 
   const handleValidation = () => {
-    const jobGroupsValidationResult =
-      formState.jobGroups ??
-      [].map((group) => groupValidator(group)).filter((result) => result !== null);
+    const jobGroupsValidationResult = (formState.jobGroups ?? [])
+      .map((group) => groupValidator(group))
+      .filter((result) => result !== null);
 
     setValidationResult({
       jobGroups: jobGroupsValidationResult,
diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
index b97c16e02d9007..0daf4f28f33d31 100644
--- a/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/new_job/recognize/components/job_item.tsx
@@ -87,12 +87,11 @@ export const JobItem: FC<JobItemProps> = memo(
           </EuiText>
 
           <EuiFlexGroup wrap responsive={false} gutterSize="xs">
-            {jobGroups ??
-              [].map((group) => (
-                <EuiFlexItem grow={false} key={group}>
-                  <EuiBadge color={tabColor(group)}>{group}</EuiBadge>
-                </EuiFlexItem>
-              ))}
+            {(jobGroups ?? []).map((group) => (
+              <EuiFlexItem grow={false} key={group}>
+                <EuiBadge color={tabColor(group)}>{group}</EuiBadge>
+              </EuiFlexItem>
+            ))}
           </EuiFlexGroup>
 
           {setupResult && setupResult.error && (