fixed enrollment token modal for managed policy (#129870) (#129975)

(cherry picked from commit 485f2d1)

Co-authored-by: Julia Bardi <[email protected]>

x-pack/plugins/fleet/public/components/new_enrollment_key_modal.tsx

@@ -76,8 +76,18 @@ export const NewEnrollmentTokenModal: React.FunctionComponent<Props> = ({
   agentPolicies = [],
 }) => {
   const { notifications } = useStartServices();
+
+  const selectPolicyOptions = useMemo(() => {
+    return agentPolicies
+      .filter((agentPolicy) => !agentPolicy.is_managed)
+      .map((agentPolicy) => ({
+        value: agentPolicy.id,
+        text: agentPolicy.name,
+      }));
+  }, [agentPolicies]);
+
   const form = useCreateApiKeyForm(
-    agentPolicies.length > 0 ? agentPolicies[0].id : undefined,
+    selectPolicyOptions.length > 0 ? selectPolicyOptions[0].value : undefined,
     (key: EnrollmentAPIKey) => {
       onClose(key);
       notifications.toasts.addSuccess(
@@ -93,15 +103,6 @@ export const NewEnrollmentTokenModal: React.FunctionComponent<Props> = ({
     }
   );
 
-  const selectPolicyOptions = useMemo(() => {
-    return agentPolicies
-      .filter((agentPolicy) => !agentPolicy.is_managed)
-      .map((agentPolicy) => ({
-        value: agentPolicy.id,
-        text: agentPolicy.name,
-      }));
-  }, [agentPolicies]);
-
   const body = (
     <EuiForm>
       <form onSubmit={form.onSubmit}>