Alerting: Fix validation of selected contact point being required in the alert form when simplified routing (#80565)

Fix validation of selected contact point being required in the alert rule form

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/contactPoint/ContactPointSelector.tsx

@@ -16,12 +16,7 @@ export interface ContactPointSelectorProps {
 }
 export function ContactPointSelector({ alertManager, contactPoints, onSelectContactPoint }: ContactPointSelectorProps) {
   const styles = useStyles2(getStyles);
-  const {
+  const { control, watch } = useFormContext<RuleFormValues>();
-    register,
-    control,
-    formState: { errors },
-    watch,
-  } = useFormContext<RuleFormValues>();
 
   const options = contactPoints.map((receiver) => {
     const integrations = receiver?.grafana_managed_receiver_configs;
@@ -39,11 +34,7 @@ export function ContactPointSelector({ alertManager, contactPoints, onSelectCont
 
   return (
     <Stack direction="column">
-      <Field
+      <Field label="Contact point">
-        label="Contact point"
-        {...register(`contactPoints.${alertManager}.selectedContactPoint`, { required: true })}
-        invalid={!!errors.contactPoints?.[alertManager]?.selectedContactPoint}
-      >
         <InputControl
           render={({ field: { onChange, ref, ...field }, fieldState: { error } }) => (
             <>
@@ -65,9 +56,10 @@ export function ContactPointSelector({ alertManager, contactPoints, onSelectCont
                   width={50}
                 />
               </div>
-              {error && <FieldValidationMessage>{'Contact point is required.'}</FieldValidationMessage>}
+              {error && <FieldValidationMessage>{error.message}</FieldValidationMessage>}
             </>
           )}
+          rules={{ required: { value: true, message: 'Contact point is required.' } }}
           control={control}
           name={`contactPoints.${alertManager}.selectedContactPoint`}
         />