Grafana-UI: Update React Hook Form to v7 (#33328)

* Update hook form

* Update Form component

* Update ChangePassword.tsx

* Update custom types

* Update SaveDashboardForm

* Update form story

* Update FieldArray.story.tsx

* Bump hook form version

* Update typescript to v4.2.4

* Update ForgottenPassword.tsx

* Update LoginForm.tsx

* Update SignupPage.tsx

* Update VerifyEmail.tsx

* Update AdminEditOrgPage.tsx

* Update UserCreatePage.tsx

* Update BasicSettings.tsx

* Update NotificationChannelForm.tsx

* Update NotificationChannelOptions.tsx

* Update NotificationSettings.tsx

* Update OptionElement.tsx

* Update AlertRuleForm.tsx

* Update AlertTypeStep.tsx

* Update AnnotationsField.tsx

* Update ConditionField.tsx

* Update ConditionsStep.tsx

* Update GroupAndNamespaceFields.tsx

* Update LabelsField.tsx

* Update QueryStep.tsx

* Update RowOptionsForm.tsx

* Update SaveDashboardAsForm.tsx

* Update NewDashboardsFolder.tsx

* Update ImportDashboardForm.tsx

* Update DashboardImportPage.tsx

* Update NewOrgPage.tsx

* Update OrgProfile.tsx

* Update UserInviteForm.tsx

* Update PlaylistForm.tsx

* Update ChangePasswordForm.tsx

* Update UserProfileEditForm.tsx

* Update TeamSettings.tsx

* Update SignupInvited.tsx

* Expose setValue from the Form

* Update typescript to v4.2.4

* Remove ref from field props

* Fix tests

* Revert TS update

* Use exact version

* Update latest batch of changes

* Reduce the number of strict TS errors

* Fix defaults

* more type error fixes

* Update CreateTeam

* fix folder picker in rule form

* fixes for hook form 7

* Update docs

Co-authored-by: Domas <domasx2@gmail.com>

public/app/features/users/SignupInvited.tsx

@@ -73,8 +73,7 @@ export const SignupInvitedPage: FC<Props> = ({ match }) => {
               <Field invalid={!!errors.email} error={errors.email && errors.email.message} label="Email">
                 <Input
                   placeholder="email@example.com"
-                  name="email"
-                  ref={register({
+                  {...register('email', {
                     required: 'Email is required',
                     pattern: {
                       value: /^\S+@\S+$/,
@@ -84,17 +83,16 @@ export const SignupInvitedPage: FC<Props> = ({ match }) => {
                 />
               </Field>
               <Field invalid={!!errors.name} error={errors.name && errors.name.message} label="Name">
-                <Input placeholder="Name (optional)" name="name" ref={register} />
+                <Input placeholder="Name (optional)" {...register('name')} />
               </Field>
               <Field invalid={!!errors.username} error={errors.username && errors.username.message} label="Username">
-                <Input placeholder="Username" name="username" ref={register({ required: 'Username is required' })} />
+                <Input {...register('username', { required: 'Username is required' })} placeholder="Username" />
               </Field>
               <Field invalid={!!errors.password} error={errors.password && errors.password.message} label="Password">
                 <Input
+                  {...register('password', { required: 'Password is required' })}
                   type="password"
                   placeholder="Password"
-                  name="password"
-                  ref={register({ required: 'Password is required' })}
                 />
               </Field>