Chore: Replace Form usage in LoginForm.tsx (#81326)

public/app/core/components/Login/LoginForm.tsx

@@ -1,9 +1,10 @@
 import { css } from '@emotion/css';
 import React, { ReactElement, useId } from 'react';
+import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, Form, Input, Field, useStyles2 } from '@grafana/ui';
+import { Button, Input, Field, useStyles2 } from '@grafana/ui';
 
 import { PasswordField } from '../PasswordField/PasswordField';
 
@@ -21,12 +22,15 @@ export const LoginForm = ({ children, onSubmit, isLoggingIn, passwordHint, login
   const styles = useStyles2(getStyles);
   const usernameId = useId();
   const passwordId = useId();
+  const {
+    handleSubmit,
+    register,
+    formState: { errors },
+  } = useForm<FormModel>({ mode: 'onChange' });
 
   return (
     <div className={styles.wrapper}>
-      <Form onSubmit={onSubmit} validateOn="onChange">
+      <form onSubmit={handleSubmit(onSubmit)}>
-        {({ register, errors }) => (
-          <>
         <Field label="Email or username" invalid={!!errors.user} error={errors.user?.message}>
           <Input
             {...register('user', { required: 'Email or username is required' })}
@@ -54,9 +58,7 @@ export const LoginForm = ({ children, onSubmit, isLoggingIn, passwordHint, login
           {isLoggingIn ? 'Logging in...' : 'Log in'}
         </Button>
         {children}
-          </>
+      </form>
-        )}
-      </Form>
     </div>
   );
 };