From 78d37f203c79b586f1cb15275cfe4a99c51c7e19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20S=C3=BC=C3=9F?= <dominik@suess.wtf>
Date: Wed, 18 Dec 2024 13:59:04 +0100
Subject: [PATCH] refactor: use react-hook-form directly (#18)

---
 .../common/AuthenticationEditor.tsx           |  57 ++--
 .../ComponentEditor/common/RelabelRules.tsx   | 255 +++++++++---------
 .../ComponentEditor/common/StaticTargets.tsx  | 101 ++++---
 .../ComponentEditor/common/TargetSelector.tsx |  25 +-
 .../ComponentEditor/common/TlsBlock.tsx       |  33 ++-
 .../ComponentEditor/common/TlsConfig.tsx      |  12 +-
 .../components/DiscoveryEc2.tsx               | 129 +++++----
 .../components/DiscoveryKubernetes.tsx        | 154 +++++------
 .../components/DiscoveryRelabel.tsx           |  15 +-
 .../ComponentEditor/components/ImportGit.tsx  |  18 +-
 .../components/LocalFileMatch.tsx             | 103 ++++---
 .../components/LokiProcess.tsx                | 189 ++++++-------
 .../components/LokiRelabel.tsx                |  18 +-
 .../components/LokiSourceFile.tsx             |  17 +-
 .../components/LokiSourceJournal.tsx          |  26 +-
 .../components/LokiSourceWindowsEvent.tsx     |  38 ++-
 .../ComponentEditor/components/LokiWrite.tsx  |  42 +--
 .../components/OTelColExporterLoki.tsx        |   8 +-
 .../components/OTelColExporterPrometheus.tsx  |  20 +-
 .../components/OTelColProcessorBatch.tsx      |  18 +-
 .../components/OTelColReceiverOTLP.tsx        |  11 +-
 .../components/PrometheusExporterGithub.tsx   |  27 +-
 .../components/PrometheusExporterMysql.tsx    |  17 +-
 .../components/PrometheusExporterRedis.tsx    |  97 ++++---
 .../components/PrometheusExporterUnix.tsx     |  39 ++-
 .../components/PrometheusExporterWindows.tsx  |  12 +-
 .../components/PrometheusRelabel.tsx          |  15 +-
 .../components/PrometheusRemoteWrite.tsx      |  93 +++----
 .../components/PrometheusScrape.tsx           |  57 ++--
 .../components/PyroscopeScrape.tsx            |  41 ++-
 .../modules/GrafanaCloudAutoConfigure.tsx     |  17 +-
 src/components/ComponentEditor/index.tsx      | 103 ++++---
 .../inputs/GenericStringMap.tsx               |  72 +++--
 .../ComponentEditor/inputs/LabelsInput.tsx    |  70 +++--
 .../ComponentEditor/inputs/MultiBlock.tsx     |  59 ++--
 .../inputs/ReferenceMultiSelect.tsx           |   6 +-
 .../inputs/ReferenceSelect.tsx                |   6 +-
 .../ComponentEditor/inputs/TypedInput.tsx     |  17 +-
 src/lib/components.ts                         |   7 +-
 39 files changed, 982 insertions(+), 1062 deletions(-)

diff --git a/src/components/ComponentEditor/common/AuthenticationEditor.tsx b/src/components/ComponentEditor/common/AuthenticationEditor.tsx
index 41e1a5f..ffcaa97 100644
--- a/src/components/ComponentEditor/common/AuthenticationEditor.tsx
+++ b/src/components/ComponentEditor/common/AuthenticationEditor.tsx
@@ -2,12 +2,11 @@ import { SelectableValue } from "@grafana/data";
 import {
   Alert,
   FieldSet,
-  FormAPI,
   InlineField,
-  InputControl,
   MultiSelect,
   RadioButtonGroup,
 } from "@grafana/ui";
+import { Controller, useFormContext } from "react-hook-form";
 import TypedInput from "../inputs/TypedInput";
 
 type AuthenticationType =
@@ -18,16 +17,15 @@ type AuthenticationType =
   | "authorization"
   | "oauth2";
 const Component = ({
-  methods,
   options,
   defaultValue,
   parent,
 }: {
-  methods: FormAPI<Record<string, any>>;
   options?: AuthenticationType[];
   defaultValue?: AuthenticationType;
   parent?: string;
 }) => {
+  const { watch, control } = useFormContext();
   const commonOptions = {
     labelWidth: 24,
   };
@@ -38,12 +36,12 @@ const Component = ({
     defaultValue = "none";
   }
   parent = parent ? parent + "." : "";
-  const watchAuthType = methods.watch(`${parent}auth_type` as const);
+  const watchAuthType = watch(`${parent}auth_type` as const);
   return (
     <FieldSet label="Authentication">
-      <InputControl
+      <Controller
         name={`${parent}auth_type` as const}
-        control={methods.control}
+        control={control}
         defaultValue={defaultValue}
         render={({ field: { ref, ...f } }) => (
           <RadioButtonGroup
@@ -90,19 +88,19 @@ const Component = ({
           <InlineField label="Username" {...commonOptions}>
             <TypedInput
               name={`${parent}basic_auth.username`}
-              control={methods.control}
+              control={control}
             />
           </InlineField>
           <InlineField label="Password" {...commonOptions}>
             <TypedInput
               name={`${parent}basic_auth.password`}
-              control={methods.control}
+              control={control}
             />
           </InlineField>
           <InlineField label="Password file" {...commonOptions}>
             <TypedInput
               name={`${parent}basic_auth.password_file`}
-              control={methods.control}
+              control={control}
             />
           </InlineField>
         </>
@@ -114,20 +112,14 @@ const Component = ({
             tooltip="Bearer token to authenticate with."
             {...commonOptions}
           >
-            <TypedInput
-              name={`${parent}bearer_token`}
-              control={methods.control}
-            />
+            <TypedInput name={`${parent}bearer_token`} control={control} />
           </InlineField>
           <InlineField
             label="Bearer token file"
             tooltip="File containing a bearer token to authenticate with."
             {...commonOptions}
           >
-            <TypedInput
-              name={`${parent}bearer_token_file`}
-              control={methods.control}
-            />
+            <TypedInput name={`${parent}bearer_token_file`} control={control} />
           </InlineField>
         </>
       )}
@@ -140,19 +132,19 @@ const Component = ({
           >
             <TypedInput
               name={`${parent}authorization.type`}
-              control={methods.control}
+              control={control}
             />
           </InlineField>
           <InlineField label="Credentials" {...commonOptions}>
             <TypedInput
               name={`${parent}authorization.credentials`}
-              control={methods.control}
+              control={control}
             />
           </InlineField>
           <InlineField label="Credentials file" {...commonOptions}>
             <TypedInput
               name={`${parent}authorization.credentials_file`}
-              control={methods.control}
+              control={control}
             />
           </InlineField>
         </>
@@ -160,27 +152,24 @@ const Component = ({
       {watchAuthType === "oauth2" && (
         <>
           <InlineField label="Client ID" {...commonOptions}>
-            <TypedInput
-              name={`${parent}oauth2.client_id`}
-              control={methods.control}
-            />
+            <TypedInput name={`${parent}oauth2.client_id`} control={control} />
           </InlineField>
           <InlineField label="Client secret" {...commonOptions}>
             <TypedInput
               name={`${parent}oauth2.client_secret`}
-              control={methods.control}
+              control={control}
             />
           </InlineField>
           <InlineField label="Client secret file" {...commonOptions}>
             <TypedInput
               name={`${parent}oauth2.client_secret_file`}
-              control={methods.control}
+              control={control}
             />
           </InlineField>
           <InlineField label="Scopes" {...commonOptions}>
-            <InputControl
+            <Controller
               name={`${parent}oauth2.scopes`}
-              control={methods.control}
+              control={control}
               render={({ field: { ref, ...f } }) => (
                 <MultiSelect
                   {...f}
@@ -191,16 +180,10 @@ const Component = ({
             />
           </InlineField>
           <InlineField label="Token URL" {...commonOptions}>
-            <TypedInput
-              name={`${parent}oauth2.token_url`}
-              control={methods.control}
-            />
+            <TypedInput name={`${parent}oauth2.token_url`} control={control} />
           </InlineField>
           <InlineField label="Proxy URL" {...commonOptions}>
-            <TypedInput
-              name={`${parent}oauth2.proxy_url`}
-              control={methods.control}
-            />
+            <TypedInput name={`${parent}oauth2.proxy_url`} control={control} />
           </InlineField>
         </>
       )}
diff --git a/src/components/ComponentEditor/common/RelabelRules.tsx b/src/components/ComponentEditor/common/RelabelRules.tsx
index 6ed6f76..02e1487 100644
--- a/src/components/ComponentEditor/common/RelabelRules.tsx
+++ b/src/components/ComponentEditor/common/RelabelRules.tsx
@@ -2,16 +2,14 @@ import { css } from "@emotion/css";
 import { GrafanaTheme2, SelectableValue } from "@grafana/data";
 import {
   Button,
-  FieldArray,
   FieldSet,
-  FormAPI,
   InlineField,
   Input,
-  InputControl,
   MultiSelect,
   Select,
   VerticalGroup,
 } from "@grafana/ui";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 
 import { useStyles } from "../../../theme";
 
@@ -84,139 +82,134 @@ const relabelActions = [
   },
 ];
 
-export const RelabelRules = ({
-  methods,
-}: {
-  methods: FormAPI<Record<string, any>>;
-}) => {
+export const RelabelRules = () => {
+  const { control, register } = useFormContext<{
+    [key: string]: any;
+    rule: Array<Record<string, any>>;
+  }>();
   const styles = useStyles(getStyles);
   const commonOptions = { labelWidth: 24 };
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "rule",
+  });
   return (
     <FieldSet label="Rules">
-      <FieldArray control={methods.control} name="rule">
-        {({ fields, append, remove }) => (
-          <>
-            {fields.map((field, index) => (
-              <div key={field.id} className={styles.ruleBox}>
-                <VerticalGroup className={styles.ruleBox}>
-                  <InlineField
-                    label="Source labels"
-                    tooltip="The list of labels whose values are to be selected. Their content is concatenated using the separator and matched against regex"
-                    {...commonOptions}
-                  >
-                    <InputControl
-                      defaultValue={field["source_labels"] || []}
-                      name={`rule[${index}].source_labels` as const}
-                      control={methods.control}
-                      render={({ field: { ref, ...f } }) => (
-                        <MultiSelect
-                          placeholder="Enter to add"
-                          allowCustomValue={true}
-                          {...f}
-                        />
-                      )}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Target label"
-                    tooltip="Label to which the resulting value will be written to."
-                    {...commonOptions}
-                  >
-                    <Input
-                      defaultValue={field["target_label"]}
-                      {...methods.register(
-                        `rule[${index}].target_label` as const,
-                      )}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Separator"
-                    tooltip="The separator used to concatenate the values present in source_labels."
-                    {...commonOptions}
-                  >
-                    <Input
-                      defaultValue={field["separator"]}
-                      placeholder=";"
-                      {...methods.register(`rule[${index}].separator` as const)}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="RegEx"
-                    tooltip="A valid RE2 expression with support for parenthesized capture groups. Used to match the extracted value from the combination of the source_label and separator fields or filter labels during the labelkeep/labeldrop/labelmap actions."
-                    {...commonOptions}
-                  >
-                    <Input
-                      defaultValue={field["regex"]}
-                      placeholder="(.*)"
-                      {...methods.register(`rule[${index}].regex` as const)}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Modulus"
-                    tooltip="A positive integer used to calculate the modulus of the hashed source label values."
-                    {...commonOptions}
-                  >
-                    <Input
-                      defaultValue={field["modulus"] || ""}
-                      type="number"
-                      {...methods.register(`rule[${index}].modulus` as const, {
-                        valueAsNumber: true,
-                      })}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Replacement"
-                    tooltip="The value against which a regex replace is performed, if the regex matches the extracted value. Supports previously captured groups."
-                    {...commonOptions}
-                  >
-                    <Input
-                      defaultValue={field["replacement"]}
-                      placeholder="$1"
-                      {...methods.register(
-                        `rule[${index}].replacement` as const,
-                      )}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Action"
-                    tooltip="The relabeling action to perform."
-                    {...commonOptions}
-                  >
-                    <InputControl
-                      name={`rule[${index}].action` as const}
-                      control={methods.control}
-                      defaultValue={field["action"] || "replace"}
-                      render={({ field: { ref, ...f } }) => (
-                        <Select
-                          {...f}
-                          placeholder="replace"
-                          options={relabelActions}
-                          width={24}
-                        />
-                      )}
-                    />
-                  </InlineField>
-                  <Button
-                    fill="outline"
-                    variant="secondary"
-                    icon="trash-alt"
-                    tooltip="Delete this rule"
-                    onClick={(e) => {
-                      remove(index);
-                      e.preventDefault();
-                    }}
-                  >
-                    Delete Rule
-                  </Button>
-                </VerticalGroup>
-              </div>
-            ))}
-            <Button onClick={() => append({})} icon="plus">
-              Add
+      {fields.map((field, index) => (
+        <div key={field.id} className={styles.ruleBox}>
+          <VerticalGroup className={styles.ruleBox}>
+            <InlineField
+              label="Source labels"
+              tooltip="The list of labels whose values are to be selected. Their content is concatenated using the separator and matched against regex"
+              {...commonOptions}
+            >
+              <Controller
+                defaultValue={field["source_labels"] || []}
+                name={`rule[${index}].source_labels` as const}
+                control={control}
+                render={({ field: { ref, ...f } }) => (
+                  <MultiSelect
+                    placeholder="Enter to add"
+                    allowCustomValue={true}
+                    {...f}
+                  />
+                )}
+              />
+            </InlineField>
+            <InlineField
+              label="Target label"
+              tooltip="Label to which the resulting value will be written to."
+              {...commonOptions}
+            >
+              <Input
+                defaultValue={field["target_label"]}
+                {...register(`rule[${index}].target_label` as const)}
+              />
+            </InlineField>
+            <InlineField
+              label="Separator"
+              tooltip="The separator used to concatenate the values present in source_labels."
+              {...commonOptions}
+            >
+              <Input
+                defaultValue={field["separator"]}
+                placeholder=";"
+                {...register(`rule[${index}].separator` as const)}
+              />
+            </InlineField>
+            <InlineField
+              label="RegEx"
+              tooltip="A valid RE2 expression with support for parenthesized capture groups. Used to match the extracted value from the combination of the source_label and separator fields or filter labels during the labelkeep/labeldrop/labelmap actions."
+              {...commonOptions}
+            >
+              <Input
+                defaultValue={field["regex"]}
+                placeholder="(.*)"
+                {...register(`rule[${index}].regex` as const)}
+              />
+            </InlineField>
+            <InlineField
+              label="Modulus"
+              tooltip="A positive integer used to calculate the modulus of the hashed source label values."
+              {...commonOptions}
+            >
+              <Input
+                defaultValue={field["modulus"] || ""}
+                type="number"
+                {...register(`rule[${index}].modulus` as const, {
+                  valueAsNumber: true,
+                })}
+              />
+            </InlineField>
+            <InlineField
+              label="Replacement"
+              tooltip="The value against which a regex replace is performed, if the regex matches the extracted value. Supports previously captured groups."
+              {...commonOptions}
+            >
+              <Input
+                defaultValue={field["replacement"]}
+                placeholder="$1"
+                {...register(`rule[${index}].replacement` as const)}
+              />
+            </InlineField>
+            <InlineField
+              label="Action"
+              tooltip="The relabeling action to perform."
+              {...commonOptions}
+            >
+              <Controller
+                name={`rule[${index}].action` as const}
+                control={control}
+                defaultValue={field["action"] || "replace"}
+                render={({ field: { ref, ...f } }) => (
+                  <Select
+                    {...f}
+                    placeholder="replace"
+                    options={relabelActions}
+                    width={24}
+                  />
+                )}
+              />
+            </InlineField>
+            <Button
+              fill="outline"
+              variant="secondary"
+              icon="trash-alt"
+              tooltip="Delete this rule"
+              onClick={(e) => {
+                remove(index);
+                e.preventDefault();
+              }}
+            >
+              Delete Rule
             </Button>
-          </>
-        )}
-      </FieldArray>
+          </VerticalGroup>
+        </div>
+      ))}
+      <Button onClick={() => append({})} icon="plus">
+        Add
+      </Button>
     </FieldSet>
   );
 };
diff --git a/src/components/ComponentEditor/common/StaticTargets.tsx b/src/components/ComponentEditor/common/StaticTargets.tsx
index 014c074..74d8772 100644
--- a/src/components/ComponentEditor/common/StaticTargets.tsx
+++ b/src/components/ComponentEditor/common/StaticTargets.tsx
@@ -1,13 +1,7 @@
 import { css } from "@emotion/css";
 import { GrafanaTheme2 } from "@grafana/data";
-import {
-  Button,
-  FieldArray,
-  FieldSet,
-  InlineField,
-  VerticalGroup,
-} from "@grafana/ui";
-import { Control } from "react-hook-form";
+import { Button, FieldSet, InlineField, VerticalGroup } from "@grafana/ui";
+import { Control, useFieldArray } from "react-hook-form";
 import { useStyles } from "../../../theme";
 import LabelsInput from "../inputs/LabelsInput";
 import TypedInput from "../inputs/TypedInput";
@@ -31,55 +25,52 @@ const Component = ({
 }) => {
   const styles = useStyles(getStyles);
   parent = parent ? parent + "." : "";
+  const { fields, append, remove } = useFieldArray({
+    name: `${parent}static_targets` as const,
+  });
   return (
     <FieldSet>
-      <FieldArray control={control} name={`${parent}static_targets` as const}>
-        {({ fields, append, remove }) => (
-          <VerticalGroup>
-            {fields.map((field, index) => (
-              <div key={field.id} className={styles.targetBox}>
-                <VerticalGroup>
-                  <InlineField
-                    label="Address"
-                    tooltip="Hostname/IP Address and port of the target to be scraped"
-                    labelWidth={14}
-                    error="An address must be defined"
-                    invalid={!!errors?.static_targets?.[index]?.address}
-                  >
-                    <TypedInput
-                      name={
-                        `${parent}static_targets[${index}].address` as const
-                      }
-                      control={control}
-                      rules={{ required: true }}
-                      placeholder="localhost:8080"
-                    />
-                  </InlineField>
-                  <LabelsInput
-                    control={control}
-                    name={`${parent}static_targets[${index}].labels`}
-                  />
-                  <Button
-                    fill="outline"
-                    variant="secondary"
-                    icon="trash-alt"
-                    tooltip="Delete this target"
-                    onClick={(e) => {
-                      remove(index);
-                      e.preventDefault();
-                    }}
-                  >
-                    Delete Target
-                  </Button>
-                </VerticalGroup>
-              </div>
-            ))}
-            <Button onClick={() => append({})} icon="plus">
-              Add Target
-            </Button>
-          </VerticalGroup>
-        )}
-      </FieldArray>
+      <VerticalGroup>
+        {fields.map((field, index) => (
+          <div key={field.id} className={styles.targetBox}>
+            <VerticalGroup>
+              <InlineField
+                label="Address"
+                tooltip="Hostname/IP Address and port of the target to be scraped"
+                labelWidth={14}
+                error="An address must be defined"
+                invalid={!!errors?.static_targets?.[index]?.address}
+              >
+                <TypedInput
+                  name={`${parent}static_targets[${index}].address` as const}
+                  control={control}
+                  rules={{ required: true }}
+                  placeholder="localhost:8080"
+                />
+              </InlineField>
+              <LabelsInput
+                control={control}
+                name={`${parent}static_targets[${index}].labels`}
+              />
+              <Button
+                fill="outline"
+                variant="secondary"
+                icon="trash-alt"
+                tooltip="Delete this target"
+                onClick={(e) => {
+                  remove(index);
+                  e.preventDefault();
+                }}
+              >
+                Delete Target
+              </Button>
+            </VerticalGroup>
+          </div>
+        ))}
+        <Button onClick={() => append({})} icon="plus">
+          Add Target
+        </Button>
+      </VerticalGroup>
     </FieldSet>
   );
 };
diff --git a/src/components/ComponentEditor/common/TargetSelector.tsx b/src/components/ComponentEditor/common/TargetSelector.tsx
index d4ef34f..651b5ba 100644
--- a/src/components/ComponentEditor/common/TargetSelector.tsx
+++ b/src/components/ComponentEditor/common/TargetSelector.tsx
@@ -2,24 +2,28 @@ import { css } from "@emotion/css";
 import { GrafanaTheme2 } from "@grafana/data";
 import {
   FieldSet,
-  FormAPI,
   InlineField,
-  InputControl,
   RadioButtonGroup,
   VerticalGroup,
 } from "@grafana/ui";
+import { Controller, useFormContext } from "react-hook-form";
 import { useStyles } from "../../../theme";
 import ReferenceSelect from "../inputs/ReferenceSelect";
 import StaticTargets from "./StaticTargets";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
-  const watchTargetType = methods.watch("target_type");
+const Component = () => {
+  const {
+    control,
+    watch,
+    formState: { errors },
+  } = useFormContext();
+  const watchTargetType = watch("target_type");
   const styles = useStyles(getStyles);
   return (
     <FieldSet label="Targets">
-      <InputControl
+      <Controller
         name="target_type"
-        control={methods.control}
+        control={control}
         defaultValue="reference"
         render={({ field: { ref, ...f } }) => (
           <RadioButtonGroup
@@ -45,21 +49,18 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
             tooltip="List of targets to scrape."
             labelWidth={14}
             error="You must specify the targets parameter"
-            invalid={!!methods.errors["targets"]}
+            invalid={!!errors["targets"]}
           >
             <ReferenceSelect
               name="targets"
               exportName="list(Target)"
-              control={methods.control}
+              control={control}
             />
           </InlineField>
         </VerticalGroup>
       )}
       {watchTargetType === "static" && (
-        <StaticTargets.Component
-          control={methods.control}
-          errors={methods.errors}
-        />
+        <StaticTargets.Component control={control} errors={errors} />
       )}
     </FieldSet>
   );
diff --git a/src/components/ComponentEditor/common/TlsBlock.tsx b/src/components/ComponentEditor/common/TlsBlock.tsx
index c9b3436..61d9afd 100644
--- a/src/components/ComponentEditor/common/TlsBlock.tsx
+++ b/src/components/ComponentEditor/common/TlsBlock.tsx
@@ -1,25 +1,24 @@
 import {
-  FormAPI,
   InlineField,
   Input,
   TextArea,
   VerticalGroup,
   Switch,
 } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 
 type Variant = "server" | "client";
 
 const TlsBlock = ({
-  methods,
   parent,
   variant,
   disabled,
 }: {
-  methods: FormAPI<Record<string, any>>;
   parent: string;
   variant: Variant;
   disabled?: boolean;
 }) => {
+  const { register } = useFormContext();
   const commonOptions = {
     labelWidth: 25,
     disabled: disabled || false,
@@ -31,42 +30,42 @@ const TlsBlock = ({
         tooltip="CA PEM-encoded text to validate the server with."
         {...commonOptions}
       >
-        <TextArea {...methods.register(`${parent}.ca_pem` as const)} />
+        <TextArea {...register(`${parent}.ca_pem` as const)} />
       </InlineField>
       <InlineField
         label="CA File"
         tooltip="Path to the CA file."
         {...commonOptions}
       >
-        <Input {...methods.register(`${parent}.ca_file` as const)} />
+        <Input {...register(`${parent}.ca_file` as const)} />
       </InlineField>
       <InlineField
         label="TLS Certificate PEM"
         tooltip="Certificate PEM-encoded text"
         {...commonOptions}
       >
-        <TextArea {...methods.register(`${parent}.cert_pem` as const)} />
+        <TextArea {...register(`${parent}.cert_pem` as const)} />
       </InlineField>
       <InlineField
         label="TLS Certificate file"
         tooltip="Path to the TLS certificate."
         {...commonOptions}
       >
-        <Input {...methods.register(`${parent}.cert_file` as const)} />
+        <Input {...register(`${parent}.cert_file` as const)} />
       </InlineField>
       <InlineField
         label="Key PEM"
         tooltip="PEM encoded key for the certificate."
         {...commonOptions}
       >
-        <TextArea {...methods.register(`${parent}.key_pem` as const)} />
+        <TextArea {...register(`${parent}.key_pem` as const)} />
       </InlineField>
       <InlineField
         label="Key file"
         tooltip="Path to the certificate key"
         {...commonOptions}
       >
-        <Input {...methods.register(`${parent}.key_file` as const)} />
+        <Input {...register(`${parent}.key_file` as const)} />
       </InlineField>
       <InlineField
         label="Minimum TLS version"
@@ -74,7 +73,7 @@ const TlsBlock = ({
         {...commonOptions}
       >
         <Input
-          {...methods.register(`${parent}.min_version` as const)}
+          {...register(`${parent}.min_version` as const)}
           placeholder="TLS 1.2"
         />
       </InlineField>
@@ -84,7 +83,7 @@ const TlsBlock = ({
         {...commonOptions}
       >
         <Input
-          {...methods.register(`${parent}.max_version` as const)}
+          {...register(`${parent}.max_version` as const)}
           placeholder="TLS 1.3"
         />
       </InlineField>
@@ -94,7 +93,7 @@ const TlsBlock = ({
         {...commonOptions}
       >
         <Input
-          {...methods.register(`${parent}.reload_interval` as const)}
+          {...register(`${parent}.reload_interval` as const)}
           placeholder="0s"
         />
       </InlineField>
@@ -104,7 +103,7 @@ const TlsBlock = ({
           tooltip="Path to the CA file used to authenticate client certificates."
           {...commonOptions}
         >
-          <Input {...methods.register(`${parent}.client_ca_file` as const)} />
+          <Input {...register(`${parent}.client_ca_file` as const)} />
         </InlineField>
       )}
       {variant === "client" && [
@@ -113,23 +112,21 @@ const TlsBlock = ({
           tooltip="Verifies the hostname of server certificates when set."
           {...commonOptions}
         >
-          <Input {...methods.register(`${parent}.server_name` as const)} />
+          <Input {...register(`${parent}.server_name` as const)} />
         </InlineField>,
         <InlineField
           label="Insecure"
           tooltip="Disables TLS when connecting to the configured server."
           {...commonOptions}
         >
-          <Switch {...methods.register(`${parent}.insecure` as const)} />
+          <Switch {...register(`${parent}.insecure` as const)} />
         </InlineField>,
         <InlineField
           label="Skip TLS verification"
           tooltip="Ignores insecure server TLS certificates."
           {...commonOptions}
         >
-          <Switch
-            {...methods.register(`${parent}.insecure_skip_verify` as const)}
-          />
+          <Switch {...register(`${parent}.insecure_skip_verify` as const)} />
         </InlineField>,
       ]}
     </VerticalGroup>
diff --git a/src/components/ComponentEditor/common/TlsConfig.tsx b/src/components/ComponentEditor/common/TlsConfig.tsx
index 07e9a60..0f7b7f0 100644
--- a/src/components/ComponentEditor/common/TlsConfig.tsx
+++ b/src/components/ComponentEditor/common/TlsConfig.tsx
@@ -1,22 +1,16 @@
-import {
-  FormAPI,
-  InlineField,
-  Input,
-  TextArea,
-  InlineSwitch,
-} from "@grafana/ui";
+import { InlineField, Input, TextArea, InlineSwitch } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 
 const TlsConfig = ({
-  methods,
   parent,
   disabled,
   defaultValues,
 }: {
-  methods: FormAPI<Record<string, any>>;
   parent: string;
   disabled?: boolean;
   defaultValues?: Record<string, any>;
 }) => {
+  const methods = useFormContext();
   const commonOptions = {
     labelWidth: 25,
     disabled: disabled || false,
diff --git a/src/components/ComponentEditor/components/DiscoveryEc2.tsx b/src/components/ComponentEditor/components/DiscoveryEc2.tsx
index 467cf16..d429ccb 100644
--- a/src/components/ComponentEditor/components/DiscoveryEc2.tsx
+++ b/src/components/ComponentEditor/components/DiscoveryEc2.tsx
@@ -1,23 +1,26 @@
 import {
   Button,
-  FieldArray,
   FieldSet,
-  FormAPI,
   InlineField,
   InlineFieldRow,
   Input,
-  InputControl,
   MultiSelect,
 } from "@grafana/ui";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 
-const DiscoveryEc2 = ({
-  methods,
-}: {
-  methods: FormAPI<Record<string, any>>;
-}) => {
+const DiscoveryEc2 = () => {
+  const { register, control } = useFormContext<{
+    [key: string]: any;
+    filter: Array<Record<string, any>>;
+  }>();
   const commonOptions = {
     labelWidth: 14,
   };
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "filter",
+  });
+
   return (
     <>
       <InlineField
@@ -25,7 +28,7 @@ const DiscoveryEc2 = ({
         tooltip="The AWS region. If blank, the region from the instance metadata is used."
         {...commonOptions}
       >
-        <Input {...methods.register("region")} placeholder="us-east-1" />
+        <Input {...register("region")} placeholder="us-east-1" />
       </InlineField>
       <InlineField
         label="Port"
@@ -34,7 +37,7 @@ const DiscoveryEc2 = ({
       >
         <Input
           type="number"
-          {...methods.register("port", { valueAsNumber: true })}
+          {...register("port", { valueAsNumber: true })}
           placeholder="80"
         />
       </InlineField>
@@ -43,84 +46,78 @@ const DiscoveryEc2 = ({
         tooltip="The AWS API key ID. If blank, the environment variable AWS_ACCESS_KEY_ID is used."
         {...commonOptions}
       >
-        <Input {...methods.register("access_key")} />
+        <Input {...register("access_key")} />
       </InlineField>
       <InlineField
         label="Secret Key"
         tooltip="The AWS API key ID. If blank, the environment variable AWS_SECRET_ACCESS_KEY is used."
         {...commonOptions}
       >
-        <Input {...methods.register("secret_key")} />
+        <Input {...register("secret_key")} />
       </InlineField>
       <InlineField
         label="Profile"
         tooltip="Named AWS profile used to connect to the API."
         {...commonOptions}
       >
-        <Input {...methods.register("profile")} />
+        <Input {...register("profile")} />
       </InlineField>
       <InlineField
         label="Role ARN"
         tooltip="AWS Role Amazon Resource Name (ARN), an alternative to using AWS API keys."
         {...commonOptions}
       >
-        <Input {...methods.register("role_arn")} />
+        <Input {...register("role_arn")} />
       </InlineField>
 
       <FieldSet label="Filters">
-        <FieldArray control={methods.control} name="filter">
-          {({ fields, append, remove }) => (
-            <>
-              {fields.map((field, index) => (
-                <InlineFieldRow key={field.id}>
-                  <InlineField
-                    label="Filter name"
-                    tooltip="Filter name to use."
-                    {...commonOptions}
-                  >
-                    <Input
-                      defaultValue={field["name"]}
-                      {...methods.register(`filter[${index}].name` as const)}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Values"
-                    tooltip="Values to pass to the filter."
-                    {...commonOptions}
-                  >
-                    <InputControl
-                      render={({ field: { onChange, ref, ...field } }) => (
-                        <MultiSelect
-                          {...field}
-                          onChange={(v) => onChange(v.map((x) => x.value))}
-                          options={[]}
-                          allowCustomValue
-                          placeholder="Filter Values"
-                        />
-                      )}
-                      defaultValue={field["values"]}
-                      control={methods.control}
-                      name={`filter[${index}].values` as const}
-                    />
-                  </InlineField>
-                  <Button
-                    fill="outline"
-                    variant="secondary"
-                    icon="trash-alt"
-                    tooltip="Delete this filter"
-                    onClick={(e) => {
-                      remove(index);
-                      e.preventDefault();
-                    }}
+        {fields.map((field, index) => (
+          <InlineFieldRow key={field.id}>
+            <InlineField
+              label="Filter name"
+              tooltip="Filter name to use."
+              {...commonOptions}
+            >
+              <Input
+                defaultValue={field["name"]}
+                {...register(`filter[${index}].name` as const)}
+              />
+            </InlineField>
+            <InlineField
+              label="Values"
+              tooltip="Values to pass to the filter."
+              {...commonOptions}
+            >
+              <Controller
+                render={({ field: { onChange, ref, ...field } }) => (
+                  <MultiSelect
+                    {...field}
+                    onChange={(v) => onChange(v.map((x) => x.value))}
+                    options={[]}
+                    allowCustomValue
+                    placeholder="Filter Values"
                   />
-                </InlineFieldRow>
-              ))}
-              <Button onClick={() => append({})} icon="plus">
-                Add
-              </Button>
-            </>
-          )}
-        </FieldArray>
+                )}
+                defaultValue={field["values"]}
+                control={control}
+                name={`filter[${index}].values` as const}
+              />
+            </InlineField>
+            <Button
+              fill="outline"
+              variant="secondary"
+              icon="trash-alt"
+              tooltip="Delete this filter"
+              onClick={(e) => {
+                remove(index);
+                e.preventDefault();
+              }}
+            />
+          </InlineFieldRow>
+        ))}
+        <Button onClick={() => append({})} icon="plus">
+          Add
+        </Button>
       </FieldSet>
     </>
   );
diff --git a/src/components/ComponentEditor/components/DiscoveryKubernetes.tsx b/src/components/ComponentEditor/components/DiscoveryKubernetes.tsx
index 3bac3a4..8955b54 100644
--- a/src/components/ComponentEditor/components/DiscoveryKubernetes.tsx
+++ b/src/components/ComponentEditor/components/DiscoveryKubernetes.tsx
@@ -1,15 +1,13 @@
 import {
   Button,
-  FieldArray,
   FieldSet,
-  FormAPI,
   InlineField,
   InlineFieldRow,
   InlineSwitch,
   Input,
-  InputControl,
   Select,
 } from "@grafana/ui";
+import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import AuthenticationEditor from "../common/AuthenticationEditor";
 import TypedInput from "../inputs/TypedInput";
 
@@ -25,26 +23,39 @@ const roleOptions = [
   label: role.charAt(0).toUpperCase() + role.slice(1),
 }));
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext<{
+    [key: string]: any;
+    selectors: Array<Record<string, any>>;
+  }>();
   const commonOptions = {
     labelWidth: 24,
   };
   const selectorsOptions = {
     labelWidth: 14,
   };
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "selectors",
+  });
   return (
     <>
       <InlineField
         label="Role"
         tooltip="Type of Kubernetes resource to query."
         required
-        invalid={!!methods.errors?.role}
+        invalid={!!errors?.role}
         error="You must select a role"
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           name="role"
-          control={methods.control}
+          control={control}
           rules={{ required: true }}
           render={({ field: { ref, ...f } }) => (
             <Select {...f} options={roleOptions} width={24} />
@@ -56,45 +67,44 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="URL of Kubernetes API server."
         {...commonOptions}
       >
-        <TypedInput name="api_server" control={methods.control} />
+        <TypedInput name="api_server" control={control} />
       </InlineField>
       <InlineField
         label="kubeconfig file"
         tooltip="Path of kubeconfig file to use for connecting to Kubernetes."
         {...commonOptions}
       >
-        <TypedInput name="kubeconfig_file" control={methods.control} />
+        <TypedInput name="kubeconfig_file" control={control} />
       </InlineField>
       <InlineField
         label="Proxy URL"
         tooltip="HTTP proxy to proxy requests through."
         {...commonOptions}
       >
-        <TypedInput name="proxy_url" control={methods.control} />
+        <TypedInput name="proxy_url" control={control} />
       </InlineField>
       <InlineField
         label="Follow redirects"
         tooltip="Whether redirects returned by the server should be followed."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("follow_redirects")} />
+        <InlineSwitch {...register("follow_redirects")} />
       </InlineField>
       <InlineField
         label="Enable HTTP2"
         tooltip="Whether HTTP2 is supported for requests."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("enable_http2")} />
+        <InlineSwitch {...register("enable_http2")} />
       </InlineField>
       <InlineField
         label="Attach node metadata"
         tooltip="Whether to attach information about the node running the workload to the metrics"
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("attach_metadata.node")} />
+        <InlineSwitch {...register("attach_metadata.node")} />
       </InlineField>
       <AuthenticationEditor.Component
-        methods={methods}
         options={["in_cluster", "basic_auth", "authorization", "oauth2"]}
         defaultValue="in_cluster"
       />
@@ -109,69 +119,59 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           option is enabled. Other roles only support selectors matching the
           role itself (e.g. node role can only contain node selectors).
         </p>
-        <FieldArray control={methods.control} name="selectors">
-          {({ fields, append, remove }) => (
-            <>
-              {fields.map((field, index) => (
-                <InlineFieldRow key={field.id}>
-                  <InlineField
-                    label="Role"
-                    tooltip="Role of the selector"
-                    {...selectorsOptions}
-                  >
-                    <InputControl
-                      name={`selectors[${index}].role` as const}
-                      control={methods.control}
-                      rules={{ required: true }}
-                      render={({ field: { ref, ...f } }) => (
-                        <Select {...f} options={roleOptions} width={24} />
-                      )}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Label"
-                    tooltip="Label selector string."
-                    {...selectorsOptions}
-                  >
-                    <Input
-                      defaultValue={field["label"]}
-                      placeholder="app=frontend"
-                      {...methods.register(
-                        `selectors[${index}].label` as const,
-                      )}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Field"
-                    tooltip="Field selector string."
-                    {...selectorsOptions}
-                  >
-                    <Input
-                      defaultValue={field["field"]}
-                      placeholder="metadata.name=my-service"
-                      {...methods.register(
-                        `selectors[${index}].field` as const,
-                      )}
-                    />
-                  </InlineField>
-                  <Button
-                    fill="outline"
-                    variant="secondary"
-                    icon="trash-alt"
-                    tooltip="Delete this selector"
-                    onClick={(e) => {
-                      remove(index);
-                      e.preventDefault();
-                    }}
-                  />
-                </InlineFieldRow>
-              ))}
-              <Button onClick={() => append({})} icon="plus">
-                Add
-              </Button>
-            </>
-          )}
-        </FieldArray>
+        {fields.map((field, index) => (
+          <InlineFieldRow key={field.id}>
+            <InlineField
+              label="Role"
+              tooltip="Role of the selector"
+              {...selectorsOptions}
+            >
+              <Controller
+                name={`selectors.${index}.role` as const}
+                control={control}
+                rules={{ required: true }}
+                render={({ field: { ref, ...f } }) => (
+                  <Select {...f} options={roleOptions} width={24} />
+                )}
+              />
+            </InlineField>
+            <InlineField
+              label="Label"
+              tooltip="Label selector string."
+              {...selectorsOptions}
+            >
+              <Input
+                defaultValue={field["label"]}
+                placeholder="app=frontend"
+                {...register(`selectors.${index}.label` as const)}
+              />
+            </InlineField>
+            <InlineField
+              label="Field"
+              tooltip="Field selector string."
+              {...selectorsOptions}
+            >
+              <Input
+                defaultValue={field["field"]}
+                placeholder="metadata.name=my-service"
+                {...register(`selectors.${index}.field` as const)}
+              />
+            </InlineField>
+            <Button
+              fill="outline"
+              variant="secondary"
+              icon="trash-alt"
+              tooltip="Delete this selector"
+              onClick={(e) => {
+                remove(index);
+                e.preventDefault();
+              }}
+            />
+          </InlineFieldRow>
+        ))}
+        <Button onClick={() => append({})} icon="plus">
+          Add
+        </Button>
       </FieldSet>
     </>
   );
diff --git a/src/components/ComponentEditor/components/DiscoveryRelabel.tsx b/src/components/ComponentEditor/components/DiscoveryRelabel.tsx
index f80dc05..3b3304e 100644
--- a/src/components/ComponentEditor/components/DiscoveryRelabel.tsx
+++ b/src/components/ComponentEditor/components/DiscoveryRelabel.tsx
@@ -1,8 +1,13 @@
-import { FormAPI, InlineField } from "@grafana/ui";
+import { InlineField } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 import { RelabelRules, transformRules } from "../common/RelabelRules";
 import ReferenceSelect from "../inputs/ReferenceSelect";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const {
+    formState: { errors },
+    control,
+  } = useFormContext();
   return (
     <>
       <InlineField
@@ -10,16 +15,16 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Targets to relabel"
         labelWidth={22}
         error="You must specify a list of destinations"
-        invalid={!!methods.errors["targets"]}
+        invalid={!!errors["targets"]}
       >
         <ReferenceSelect
           name="targets"
           exportName="list(Target)"
-          control={methods.control}
+          control={control}
         />
       </InlineField>
 
-      <RelabelRules methods={methods} />
+      <RelabelRules />
     </>
   );
 };
diff --git a/src/components/ComponentEditor/components/ImportGit.tsx b/src/components/ComponentEditor/components/ImportGit.tsx
index 11ad899..01db5ce 100644
--- a/src/components/ComponentEditor/components/ImportGit.tsx
+++ b/src/components/ComponentEditor/components/ImportGit.tsx
@@ -1,8 +1,10 @@
-import { FormAPI, InlineField } from "@grafana/ui";
+import { InlineField } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 
 import TypedInput from "../inputs/TypedInput";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const { control } = useFormContext();
   return (
     <>
       <InlineField
@@ -10,7 +12,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Source repository containing an alloy module"
         labelWidth={20}
       >
-        <TypedInput width={64} control={methods.control} name="repository" />
+        <TypedInput width={64} control={control} name="repository" />
       </InlineField>
       <InlineField
         label="Revision"
@@ -20,7 +22,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         <TypedInput
           width={64}
           placeholder="main"
-          control={methods.control}
+          control={control}
           name="revision"
         />
       </InlineField>
@@ -29,18 +31,14 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Path of the alloy module file to import"
         labelWidth={20}
       >
-        <TypedInput width={64} control={methods.control} name="path" />
+        <TypedInput width={64} control={control} name="path" />
       </InlineField>
       <InlineField
         label="Pull frequency"
         tooltip="How often the repository should be checked for updates to the specified revision"
         labelWidth={20}
       >
-        <TypedInput
-          width={64}
-          control={methods.control}
-          name="pull_frequency"
-        />
+        <TypedInput width={64} control={control} name="pull_frequency" />
       </InlineField>
     </>
   );
diff --git a/src/components/ComponentEditor/components/LocalFileMatch.tsx b/src/components/ComponentEditor/components/LocalFileMatch.tsx
index 8e46452..9de6212 100644
--- a/src/components/ComponentEditor/components/LocalFileMatch.tsx
+++ b/src/components/ComponentEditor/components/LocalFileMatch.tsx
@@ -1,17 +1,24 @@
 import {
   Button,
-  FieldArray,
   FieldSet,
-  FormAPI,
   InlineField,
   InlineFieldRow,
   Input,
 } from "@grafana/ui";
+import { useFieldArray, useFormContext } from "react-hook-form";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const commonOptions = {
     labelWidth: 14,
   };
+  const { control, register } = useFormContext<{
+    [key: string]: any;
+    path_targets: Array<Record<string, any>>;
+  }>();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "path_targets",
+  });
   return (
     <>
       <InlineField
@@ -19,56 +26,48 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="How often to sync filesystem and targets"
         {...commonOptions}
       >
-        <Input {...methods.register("sync_period")} placeholder="10s" />
+        <Input {...register("sync_period")} placeholder="10s" />
       </InlineField>
       <FieldSet label="Path Targets">
-        <FieldArray control={methods.control} name="path_targets">
-          {({ fields, append, remove }) => (
-            <>
-              {fields.map((field, index) => (
-                <InlineFieldRow key={field.id}>
-                  <InlineField
-                    label="Include"
-                    tooltip="Target to expand."
-                    {...commonOptions}
-                  >
-                    <Input
-                      defaultValue={field["__path__"]}
-                      {...methods.register(
-                        `path_targets[${index}].__path__` as const
-                      )}
-                    />
-                  </InlineField>
-                  <InlineField
-                    label="Exclude"
-                    tooltip="Exclude files matching this pattern"
-                    {...commonOptions}
-                  >
-                    <Input
-                      defaultValue={field["__path_exclude__"]}
-                      {...methods.register(
-                        `path_targets[${index}].__path_exclude__` as const
-                      )}
-                    />
-                  </InlineField>
-                  <Button
-                    fill="outline"
-                    variant="secondary"
-                    icon="trash-alt"
-                    tooltip="Delete this pattern"
-                    onClick={(e) => {
-                      remove(index);
-                      e.preventDefault();
-                    }}
-                  />
-                </InlineFieldRow>
-              ))}
-              <Button onClick={() => append({})} icon="plus">
-                Add
-              </Button>
-            </>
-          )}
-        </FieldArray>
+        {fields.map((field, index) => (
+          <InlineFieldRow key={field.id}>
+            <InlineField
+              label="Include"
+              tooltip="Target to expand."
+              {...commonOptions}
+            >
+              <Input
+                defaultValue={field["__path__"]}
+                {...register(`path_targets[${index}].__path__` as const)}
+              />
+            </InlineField>
+            <InlineField
+              label="Exclude"
+              tooltip="Exclude files matching this pattern"
+              {...commonOptions}
+            >
+              <Input
+                defaultValue={field["__path_exclude__"]}
+                {...register(
+                  `path_targets[${index}].__path_exclude__` as const,
+                )}
+              />
+            </InlineField>
+            <Button
+              fill="outline"
+              variant="secondary"
+              icon="trash-alt"
+              tooltip="Delete this pattern"
+              onClick={(e) => {
+                remove(index);
+                e.preventDefault();
+              }}
+            />
+          </InlineFieldRow>
+        ))}
+        <Button onClick={() => append({})} icon="plus">
+          Add
+        </Button>
       </FieldSet>
     </>
   );
@@ -85,7 +84,7 @@ const LocalFileMatch = {
         if (target["__path_exclude__"] === "")
           delete target["__path_exclude__"];
         return target;
-      }
+      },
     );
     return data;
   },
diff --git a/src/components/ComponentEditor/components/LokiProcess.tsx b/src/components/ComponentEditor/components/LokiProcess.tsx
index f2e7c16..b4c000c 100644
--- a/src/components/ComponentEditor/components/LokiProcess.tsx
+++ b/src/components/ComponentEditor/components/LokiProcess.tsx
@@ -4,17 +4,20 @@ import {
   Alert,
   Button,
   Card,
-  FieldArray,
   FieldSet,
-  FormAPI,
   IconButton,
   InlineField,
   InlineSwitch,
-  InputControl,
   MultiSelect,
   Select,
 } from "@grafana/ui";
-import { get } from "react-hook-form";
+import {
+  Controller,
+  get,
+  useFieldArray,
+  useFormContext,
+  UseFormReturn,
+} from "react-hook-form";
 import { useStyles } from "../../../theme";
 import GenericStringMap from "../inputs/GenericStringMap";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
@@ -35,7 +38,7 @@ const stages = [
     value: "stage.drop",
     label: "Drop",
     description: "Configures a drop processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -95,7 +98,7 @@ const stages = [
     value: "stage.json",
     label: "JSON",
     description: "Configures a JSON processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <GenericStringMap
@@ -145,11 +148,11 @@ const stages = [
     value: "stage.label_drop",
     label: "Label drop",
     description: "Drop labels from an incoming message",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField label="Labels" tooltip="List of labels to drop">
-            <InputControl
+            <Controller
               render={({ field: { onChange, ref, ...field } }) => (
                 <MultiSelect
                   {...field}
@@ -173,11 +176,11 @@ const stages = [
     label: "Label keep",
     description:
       "Filters the label set of an incoming log entry down to a subset.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField label="Labels" tooltip="Labels to filter log entries">
-            <InputControl
+            <Controller
               render={({ field: { onChange, ref, ...field } }) => (
                 <MultiSelect
                   {...field}
@@ -201,7 +204,7 @@ const stages = [
     label: "Labels",
     description:
       "Configures a labels processing stage that can read data from the extracted values map and set new labels on incoming log entries.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <GenericStringMap
@@ -233,7 +236,7 @@ const stages = [
     value: "stage.limit",
     label: "Limit",
     description: "Configures a limit processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -295,7 +298,7 @@ const stages = [
     value: "stage.logfmt",
     label: "logfmt",
     description: "Configures a logfmt processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <GenericStringMap
@@ -333,7 +336,7 @@ const stages = [
     value: "stage.match",
     label: "Match",
     description: "Configures a match processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -380,7 +383,7 @@ const stages = [
     value: "stage.metrics",
     label: "Metrics",
     description: "Configures a metrics stage.",
-    editor: (_parent: string, _methods: FormAPI<Record<string, any>>) => {
+    editor: (_parent: string, _methods: UseFormReturn) => {
       return (
         <Alert severity="error" title="Unsupported component">
           <p>
@@ -403,7 +406,7 @@ const stages = [
     value: "stage.multiline",
     label: "Multiline",
     description: "Configures a multiline processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -444,7 +447,7 @@ const stages = [
     value: "stage.output",
     label: "Output",
     description: "Configures an output processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -462,14 +465,14 @@ const stages = [
     value: "stage.pack",
     label: "Pack",
     description: "Configures a pack processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
             label="Labels"
             tooltip="The values from the extracted data and labels to pack with the log entry."
           >
-            <InputControl
+            <Controller
               render={({ field: { onChange, ref, ...field } }) => (
                 <MultiSelect
                   {...field}
@@ -504,7 +507,7 @@ const stages = [
     value: "stage.regex",
     label: "RegEx",
     description: "Configures a regex processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -530,7 +533,7 @@ const stages = [
     value: "stage.replace",
     label: "Replace",
     description: "Configures a replace processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -562,7 +565,7 @@ const stages = [
     value: "stage.static_labels",
     label: "Static Labels",
     description: "Configures a static_labels processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <GenericStringMap
@@ -594,7 +597,7 @@ const stages = [
     value: "stage.template",
     label: "Template",
     description: "Configures a template processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -614,7 +617,7 @@ const stages = [
     value: "stage.tenant",
     label: "Tenant",
     description: "Configures a tenant processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField label="Label" tooltip="The label to set as tenant ID.">
@@ -640,7 +643,7 @@ const stages = [
     value: "stage.timestamp",
     label: "Timestamp",
     description: "Configures a timestamp processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -662,7 +665,7 @@ const stages = [
             label="Fallback formats"
             tooltip="Fallback formats to try if the format field fails."
           >
-            <InputControl
+            <Controller
               render={({ field: { onChange, ref, ...field } }) => (
                 <MultiSelect
                   {...field}
@@ -701,7 +704,7 @@ const stages = [
     value: "stage.geoip",
     label: "GeoIP",
     description: "Configures a geoip processing stage.",
-    editor: (parent: string, methods: FormAPI<Record<string, any>>) => {
+    editor: (parent: string, methods: UseFormReturn) => {
       return (
         <>
           <InlineField
@@ -751,7 +754,13 @@ const stages = [
 ];
 const stagesDict = Object.assign({}, ...stages.map((x) => ({ [x.value]: x })));
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const methods = useFormContext();
+  const { control, watch } = methods;
+  const { fields, append, remove, move } = useFieldArray({
+    control,
+    name: "stages",
+  });
   const styles = useStyles(getStyles);
   return (
     <>
@@ -764,75 +773,67 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         <ReferenceMultiSelect
           name="forward_to"
           exportName="LokiReceiver"
-          control={methods.control}
+          control={control}
         />
       </InlineField>
       <FieldSet label="Stages">
-        <FieldArray control={methods.control} name="stages">
-          {({ fields, append, remove, move, swap }) => (
-            <>
-              {fields.map((field, index) => {
-                const stageType = methods.watch(
-                  `stages[${index}].comp-name` as const,
-                );
-                return (
-                  <Card key={field.id} className={styles.card}>
-                    <Card.Heading>
-                      <InputControl
-                        render={({ field: { ref, ...field } }) => (
-                          <Select {...field} options={stages} />
-                        )}
-                        control={methods.control}
-                        name={`stages[${index}].comp-name` as const}
-                      />
-                    </Card.Heading>
-                    <Card.Description>
-                      {stageType && stageType.description}
-                    </Card.Description>
-                    <Card.Actions>
-                      {stageType?.editor &&
-                        stageType.editor(`stages[${index}]` as const, methods)}
-                    </Card.Actions>
-                    <Card.SecondaryActions>
-                      {index !== 0 && (
-                        <IconButton
-                          name="arrow-up"
-                          tooltip="Move this stage up"
-                          onClick={(e) => {
-                            move(index, index - 1);
-                            e.preventDefault();
-                          }}
-                        />
-                      )}
-                      {index < fields.length - 1 && (
-                        <IconButton
-                          name="arrow-down"
-                          tooltip="Move this stage down"
-                          onClick={(e) => {
-                            move(index, index + 1);
-                            e.preventDefault();
-                          }}
-                        />
-                      )}
-                      <IconButton
-                        key="delete"
-                        name="trash-alt"
-                        tooltip="Delete this filter"
-                        onClick={(e) => {
-                          remove(index);
-                          e.preventDefault();
-                        }}
-                      />
-                    </Card.SecondaryActions>
-                  </Card>
-                );
-              })}
-              <Button onClick={() => append({})} icon="plus">
-                Add
-              </Button>
-            </>
-          )}
-        </FieldArray>
+        {fields.map((field, index) => {
+          const stageType = watch(`stages[${index}].comp-name` as const);
+          return (
+            <Card key={field.id} className={styles.card}>
+              <Card.Heading>
+                <Controller
+                  render={({ field: { ref, ...field } }) => (
+                    <Select {...field} options={stages} />
+                  )}
+                  control={control}
+                  name={`stages[${index}].comp-name` as const}
+                />
+              </Card.Heading>
+              <Card.Description>
+                {stageType && stageType.description}
+              </Card.Description>
+              <Card.Actions>
+                {stageType?.editor &&
+                  stageType.editor(`stages[${index}]` as const, methods)}
+              </Card.Actions>
+              <Card.SecondaryActions>
+                {index !== 0 && (
+                  <IconButton
+                    name="arrow-up"
+                    tooltip="Move this stage up"
+                    onClick={(e) => {
+                      move(index, index - 1);
+                      e.preventDefault();
+                    }}
+                  />
+                )}
+                {index < fields.length - 1 && (
+                  <IconButton
+                    name="arrow-down"
+                    tooltip="Move this stage down"
+                    onClick={(e) => {
+                      move(index, index + 1);
+                      e.preventDefault();
+                    }}
+                  />
+                )}
+                <IconButton
+                  key="delete"
+                  name="trash-alt"
+                  tooltip="Delete this filter"
+                  onClick={(e) => {
+                    remove(index);
+                    e.preventDefault();
+                  }}
+                />
+              </Card.SecondaryActions>
+            </Card>
+          );
+        })}
+        <Button onClick={() => append({})} icon="plus">
+          Add
+        </Button>
       </FieldSet>
     </>
   );
diff --git a/src/components/ComponentEditor/components/LokiRelabel.tsx b/src/components/ComponentEditor/components/LokiRelabel.tsx
index 0107f37..b891ce4 100644
--- a/src/components/ComponentEditor/components/LokiRelabel.tsx
+++ b/src/components/ComponentEditor/components/LokiRelabel.tsx
@@ -1,8 +1,14 @@
-import { FormAPI, InlineField, Input } from "@grafana/ui";
+import { InlineField, Input } from "@grafana/ui";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 import { RelabelRules, transformRules } from "../common/RelabelRules";
+import { useFormContext } from "react-hook-form";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const {
+    formState: { errors },
+    control,
+    register,
+  } = useFormContext();
   return (
     <>
       <InlineField
@@ -10,12 +16,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Where to forward log entries after relabeling."
         labelWidth={22}
         error="You must specify a list of destinations"
-        invalid={!!methods.errors["targets"]}
+        invalid={!!errors["targets"]}
       >
         <ReferenceMultiSelect
           name="forward_to"
           exportName="LokiReceiver"
-          control={methods.control}
+          control={control}
         />
       </InlineField>
       <InlineField
@@ -23,9 +29,9 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="The maximum number of elements to hold in the relabeling cache."
         labelWidth={22}
       >
-        <Input type="number" {...methods.register("max_cache_size")} />
+        <Input type="number" {...register("max_cache_size")} />
       </InlineField>
-      <RelabelRules methods={methods} />
+      <RelabelRules />
     </>
   );
 };
diff --git a/src/components/ComponentEditor/components/LokiSourceFile.tsx b/src/components/ComponentEditor/components/LokiSourceFile.tsx
index 080e799..68938fb 100644
--- a/src/components/ComponentEditor/components/LokiSourceFile.tsx
+++ b/src/components/ComponentEditor/components/LokiSourceFile.tsx
@@ -1,8 +1,13 @@
-import { FormAPI, InlineField } from "@grafana/ui";
+import { InlineField } from "@grafana/ui";
 import ReferenceSelect from "../inputs/ReferenceSelect";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
+import { useFormContext } from "react-hook-form";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const {
+    formState: { errors },
+    control,
+  } = useFormContext();
   return (
     <>
       <InlineField
@@ -10,12 +15,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="List of files to read from."
         labelWidth={14}
         error="You must specify the targets parameter"
-        invalid={!!methods.errors["targets"]}
+        invalid={!!errors["targets"]}
       >
         <ReferenceSelect
           name="targets"
           exportName="list(Target)"
-          control={methods.control}
+          control={control}
         />
       </InlineField>
       <InlineField
@@ -23,12 +28,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="List of receivers to send log entries to."
         labelWidth={14}
         error="You must specify the destination"
-        invalid={!!methods.errors["forward_to"]}
+        invalid={!!errors["forward_to"]}
       >
         <ReferenceMultiSelect
           name="forward_to"
           exportName="LokiReceiver"
-          control={methods.control}
+          control={control}
         />
       </InlineField>
     </>
diff --git a/src/components/ComponentEditor/components/LokiSourceJournal.tsx b/src/components/ComponentEditor/components/LokiSourceJournal.tsx
index 20fd383..71194e3 100644
--- a/src/components/ComponentEditor/components/LokiSourceJournal.tsx
+++ b/src/components/ComponentEditor/components/LokiSourceJournal.tsx
@@ -1,10 +1,16 @@
-import { FieldSet, FormAPI, InlineField, InlineSwitch } from "@grafana/ui";
+import { FieldSet, InlineField, InlineSwitch } from "@grafana/ui";
 import ReferenceSelect from "../inputs/ReferenceSelect";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 import TypedInput from "../inputs/TypedInput";
 import LabelsInput from "../inputs/LabelsInput";
+import { useFormContext } from "react-hook-form";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext();
   const commonOptions = { labelWidth: 24 };
   return (
     <>
@@ -13,14 +19,14 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Whether to forward the original journal entry as JSON."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("format_as_json")} />
+        <InlineSwitch {...register("format_as_json")} />
       </InlineField>
       <InlineField
         label="Max age"
         tooltip="The oldest relative time from process start that will be read."
         {...commonOptions}
       >
-        <TypedInput name="max_age" control={methods.control} placeholder="7h" />
+        <TypedInput name="max_age" control={control} placeholder="7h" />
       </InlineField>
       <InlineField
         label="Path"
@@ -29,7 +35,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
       >
         <TypedInput
           name="path"
-          control={methods.control}
+          control={control}
           placeholder="/var/log/journal"
         />
       </InlineField>
@@ -38,7 +44,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Journal matches to filter. The + character is not supported, only logical AND matches will be added."
         {...commonOptions}
       >
-        <TypedInput name="matches" control={methods.control} />
+        <TypedInput name="matches" control={control} />
       </InlineField>
       <InlineField
         label="Relabel Rules"
@@ -48,7 +54,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         <ReferenceSelect
           name="relabel_rules"
           exportName="RelabelRules"
-          control={methods.control}
+          control={control}
           width={27}
         />
       </InlineField>
@@ -57,18 +63,18 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="List of receivers to send log entries to."
         {...commonOptions}
         error="You must specify the destination"
-        invalid={!!methods.errors["forward_to"]}
+        invalid={!!errors["forward_to"]}
       >
         <ReferenceMultiSelect
           name="forward_to"
           exportName="LokiReceiver"
-          control={methods.control}
+          control={control}
           rules={{ required: true }}
           width={27}
         />
       </InlineField>
       <FieldSet label="Labels">
-        <LabelsInput name="labels_array" control={methods.control} />
+        <LabelsInput name="labels_array" control={control} />
       </FieldSet>
     </>
   );
diff --git a/src/components/ComponentEditor/components/LokiSourceWindowsEvent.tsx b/src/components/ComponentEditor/components/LokiSourceWindowsEvent.tsx
index 5aff589..49dc260 100644
--- a/src/components/ComponentEditor/components/LokiSourceWindowsEvent.tsx
+++ b/src/components/ComponentEditor/components/LokiSourceWindowsEvent.tsx
@@ -1,9 +1,15 @@
-import { FormAPI, InlineField, InlineSwitch } from "@grafana/ui";
+import { InlineField, InlineSwitch } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 import TypedInput from "../inputs/TypedInput";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const commonOptions = { labelWidth: 24 };
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext();
   return (
     <>
       <InlineField
@@ -13,7 +19,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
       >
         <TypedInput
           name="eventlog_name"
-          control={methods.control}
+          control={control}
           placeholder="Application"
         />
       </InlineField>
@@ -22,12 +28,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="List of receivers to send log entries to."
         {...commonOptions}
         error="You must specify the destination"
-        invalid={!!methods.errors["forward_to"]}
+        invalid={!!errors["forward_to"]}
       >
         <ReferenceMultiSelect
           name="forward_to"
           exportName="LokiReceiver"
-          control={methods.control}
+          control={control}
           rules={{ required: true }}
           width={27}
         />
@@ -37,57 +43,49 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Event log to read from."
         {...commonOptions}
       >
-        <TypedInput
-          name="xpath_query"
-          control={methods.control}
-          placeholder="*"
-        />
+        <TypedInput name="xpath_query" control={control} placeholder="*" />
       </InlineField>
       <InlineField
         label="Bookmark path"
         tooltip="Keeps position in event log"
         {...commonOptions}
       >
-        <TypedInput name="bookmark_path" control={methods.control} />
+        <TypedInput name="bookmark_path" control={control} />
       </InlineField>
       <InlineField
         label="Poll interval"
         tooltip="How often to poll the event log."
         {...commonOptions}
       >
-        <TypedInput
-          name="poll_interval"
-          control={methods.control}
-          placeholder="3s"
-        />
+        <TypedInput name="poll_interval" control={control} placeholder="3s" />
       </InlineField>
       <InlineField
         label="Locale"
         tooltip="Locale ID for event rendering. 0 default is Windows Locale."
         {...commonOptions}
       >
-        <TypedInput name="locale" control={methods.control} type="number" />
+        <TypedInput name="locale" control={control} type="number" />
       </InlineField>
       <InlineField
         label="Exclude event data"
         tooltip="Exclude event data."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("exclude_event_data")} />
+        <InlineSwitch {...register("exclude_event_data")} />
       </InlineField>
       <InlineField
         label="Exclude user data"
         tooltip="Exclude user data."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("exclude_user_data")} />
+        <InlineSwitch {...register("exclude_user_data")} />
       </InlineField>
       <InlineField
         label="Use incoming timestamp"
         tooltip="When false, assigns the current timestamp to the log when it was processed."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("use_incoming_timestamp")} />
+        <InlineSwitch {...register("use_incoming_timestamp")} />
       </InlineField>
     </>
   );
diff --git a/src/components/ComponentEditor/components/LokiWrite.tsx b/src/components/ComponentEditor/components/LokiWrite.tsx
index 1d91666..2099126 100644
--- a/src/components/ComponentEditor/components/LokiWrite.tsx
+++ b/src/components/ComponentEditor/components/LokiWrite.tsx
@@ -1,5 +1,4 @@
 import {
-  FormAPI,
   Input,
   Alert,
   LinkButton,
@@ -8,15 +7,21 @@ import {
   InlineField,
   InlineSwitch,
 } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 import AuthenticationEditor from "../common/AuthenticationEditor";
 import TlsConfig from "../common/TlsConfig";
 import MultiBlock from "../inputs/MultiBlock";
 import TypedInput from "../inputs/TypedInput";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const commonOptions = {
     labelWidth: 24,
   };
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext();
   return (
     <>
       <Alert severity="info" title="Connection Information">
@@ -33,7 +38,6 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
       <MultiBlock
         name="endpoint"
         title="Endpoints"
-        methods={methods}
         newBlock={{
           enable_http2: true,
           follow_redirects: true,
@@ -46,17 +50,16 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                 label="Endpoint URL"
                 tooltip="Where to send metrics to"
                 error="An endpoint URL is required"
-                invalid={!!methods.errors["endpoint"]?.url}
+                invalid={!!errors["endpoint"]?.url}
                 {...commonOptions}
               >
                 <TypedInput
                   name={`endpoint[${index}].url` as const}
-                  control={methods.control}
+                  control={control}
                   defaultValue={field["url"]}
                 />
               </InlineField>
               <AuthenticationEditor.Component
-                methods={methods}
                 parent={`endpoint[${index}]` as const}
                 defaultValue={field.auth_type}
               />
@@ -68,7 +71,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                 >
                   <TypedInput
                     name={`endpoint[${index}].tenant_id` as const}
-                    control={methods.control}
+                    control={control}
                     defaultValue={field["tenant_id"]}
                   />
                 </InlineField>
@@ -80,7 +83,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <TypedInput
                       name={`endpoint[${index}].batch_wait` as const}
-                      control={methods.control}
+                      control={control}
                       defaultValue={field["batch_wait"]}
                     />
                   </InlineField>
@@ -91,7 +94,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <TypedInput
                       name={`endpoint[${index}].batch_size` as const}
-                      control={methods.control}
+                      control={control}
                       defaultValue={field["batch_size"]}
                     />
                   </InlineField>
@@ -102,7 +105,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <TypedInput
                       name={`endpoint[${index}].min_backoff_period` as const}
-                      control={methods.control}
+                      control={control}
                       defaultValue={field?.min_backoff_period}
                     />
                   </InlineField>
@@ -113,7 +116,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <TypedInput
                       name={`endpoint[${index}].max_backoff_period` as const}
-                      control={methods.control}
+                      control={control}
                       defaultValue={field?.max_backoff_period}
                     />
                   </InlineField>
@@ -123,9 +126,9 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <Input
-                      {...methods.register(
+                      {...register(
                         `endpoint[${index}].max_backoff_retries` as const,
-                        { valueAsNumber: true }
+                        { valueAsNumber: true },
                       )}
                       defaultValue={field?.max_backoff_retries}
                     />
@@ -133,7 +136,6 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                 </ControlledCollapse>
                 <ControlledCollapse label="TLS Configuration">
                   <TlsConfig
-                    methods={methods}
                     parent={`endpoint[${index}].tls_config` as const}
                     defaultValues={field?.tls_config}
                   />
@@ -146,7 +148,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <TypedInput
                       name={`endpoint[${index}].proxy_url` as const}
-                      control={methods.control}
+                      control={control}
                       defaultValue={field["proxy_url"]}
                     />
                   </InlineField>
@@ -157,7 +159,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <TypedInput
                       name={`endpoint[${index}].remote_timeout` as const}
-                      control={methods.control}
+                      control={control}
                       defaultValue={field["remote_timeout"]}
                     />
                   </InlineField>
@@ -167,8 +169,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <InlineSwitch
-                      {...methods.register(
-                        `endpoint[${index}].follow_redirects` as const
+                      {...register(
+                        `endpoint[${index}].follow_redirects` as const,
                       )}
                       defaultChecked={field["follow_redirects"]}
                     />
@@ -179,9 +181,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <InlineSwitch
-                      {...methods.register(
-                        `endpoint[${index}].enable_http2` as const
-                      )}
+                      {...register(`endpoint[${index}].enable_http2` as const)}
                       defaultChecked={field["enable_http2"]}
                     />
                   </InlineField>
diff --git a/src/components/ComponentEditor/components/OTelColExporterLoki.tsx b/src/components/ComponentEditor/components/OTelColExporterLoki.tsx
index b0d72f8..0e91397 100644
--- a/src/components/ComponentEditor/components/OTelColExporterLoki.tsx
+++ b/src/components/ComponentEditor/components/OTelColExporterLoki.tsx
@@ -1,16 +1,18 @@
-import { FormAPI, InlineField, VerticalGroup } from "@grafana/ui";
+import { InlineField, VerticalGroup } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const commonOptions = {
     labelWidth: 25,
   };
+  const { control } = useFormContext();
   return (
     <>
       <VerticalGroup>
         <InlineField label="Forward to" {...commonOptions}>
           <ReferenceMultiSelect
-            control={methods.control}
+            control={control}
             name="forward_to"
             exportName="LokiReceiver"
           />
diff --git a/src/components/ComponentEditor/components/OTelColExporterPrometheus.tsx b/src/components/ComponentEditor/components/OTelColExporterPrometheus.tsx
index a8072d3..e8509f7 100644
--- a/src/components/ComponentEditor/components/OTelColExporterPrometheus.tsx
+++ b/src/components/ComponentEditor/components/OTelColExporterPrometheus.tsx
@@ -1,22 +1,18 @@
-import {
-  FormAPI,
-  InlineField,
-  InlineSwitch,
-  Input,
-  VerticalGroup,
-} from "@grafana/ui";
+import { InlineField, InlineSwitch, Input, VerticalGroup } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const commonOptions = {
     labelWidth: 25,
   };
+  const { control, register } = useFormContext();
   return (
     <>
       <VerticalGroup>
         <InlineField label="Forward to" {...commonOptions}>
           <ReferenceMultiSelect
-            control={methods.control}
+            control={control}
             name="forward_to"
             exportName="PrometheusReceiver"
           />
@@ -26,21 +22,21 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           tooltip="Whether to include target_info metrics."
           {...commonOptions}
         >
-          <InlineSwitch {...methods.register("include_target_info")} />
+          <InlineSwitch {...register("include_target_info")} />
         </InlineField>
         <InlineField
           label="Include scope"
           tooltip="Whether to include otel_scope_info metrics."
           {...commonOptions}
         >
-          <InlineSwitch {...methods.register("include_scope_info")} />
+          <InlineSwitch {...register("include_scope_info")} />
         </InlineField>
         <InlineField
           label="GC Frequency"
           tooltip="How often to clean up stale metrics from memory."
           {...commonOptions}
         >
-          <Input placeholder="5m" {...methods.register("gc_frequency")} />
+          <Input placeholder="5m" {...register("gc_frequency")} />
         </InlineField>
       </VerticalGroup>
     </>
diff --git a/src/components/ComponentEditor/components/OTelColProcessorBatch.tsx b/src/components/ComponentEditor/components/OTelColProcessorBatch.tsx
index 3ac26b2..5238be9 100644
--- a/src/components/ComponentEditor/components/OTelColProcessorBatch.tsx
+++ b/src/components/ComponentEditor/components/OTelColProcessorBatch.tsx
@@ -1,10 +1,12 @@
-import { FormAPI, InlineField, Input, VerticalGroup } from "@grafana/ui";
+import { InlineField, Input, VerticalGroup } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const commonOptions = {
     labelWidth: 25,
   };
+  const { register, control } = useFormContext();
   return (
     <>
       <VerticalGroup>
@@ -13,7 +15,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           tooltip="How long to wait before flushing the batch."
           {...commonOptions}
         >
-          <Input {...methods.register("timeout")} placeholder="200ms" />
+          <Input {...register("timeout")} placeholder="200ms" />
         </InlineField>
         <InlineField
           label="Batch size"
@@ -22,7 +24,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         >
           <Input
             type="number"
-            {...methods.register("send_batch_size", { valueAsNumber: true })}
+            {...register("send_batch_size", { valueAsNumber: true })}
             placeholder="8192"
           />
         </InlineField>
@@ -33,7 +35,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         >
           <Input
             type="number"
-            {...methods.register("send_batch_max_size", {
+            {...register("send_batch_max_size", {
               valueAsNumber: true,
             })}
             placeholder="0"
@@ -44,21 +46,21 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
       <VerticalGroup>
         <InlineField label="Metrics" {...commonOptions}>
           <ReferenceMultiSelect
-            control={methods.control}
+            control={control}
             name="output.metrics"
             exportName="otel.MetricsConsumer"
           />
         </InlineField>
         <InlineField label="Logs" {...commonOptions}>
           <ReferenceMultiSelect
-            control={methods.control}
+            control={control}
             name="output.logs"
             exportName="otel.LogsConsumer"
           />
         </InlineField>
         <InlineField label="traces" {...commonOptions}>
           <ReferenceMultiSelect
-            control={methods.control}
+            control={control}
             name="output.traces"
             exportName="otel.TracesConsumer"
           />
diff --git a/src/components/ComponentEditor/components/OTelColReceiverOTLP.tsx b/src/components/ComponentEditor/components/OTelColReceiverOTLP.tsx
index 007a67f..867eb79 100644
--- a/src/components/ComponentEditor/components/OTelColReceiverOTLP.tsx
+++ b/src/components/ComponentEditor/components/OTelColReceiverOTLP.tsx
@@ -1,5 +1,4 @@
 import {
-  FormAPI,
   HorizontalGroup,
   InlineField,
   Input,
@@ -7,15 +6,17 @@ import {
   VerticalGroup,
 } from "@grafana/ui";
 import { useState } from "react";
+import { useFormContext } from "react-hook-form";
 import TlsBlock from "../common/TlsBlock";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const methods = useFormContext();
   const [httpEnableTLS, setHttpEnableTLS] = useState(
-    methods.getValues().http?.tls
+    methods.getValues().http?.tls,
   );
   const [grpcEnableTLS, setGrpcEnableTLS] = useState(
-    methods.getValues().grpc?.tls
+    methods.getValues().grpc?.tls,
   );
 
   const watchGrpcEnabled = methods.watch("grpc.enabled");
@@ -126,7 +127,6 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         </VerticalGroup>
         {grpcEnableTLS && (
           <TlsBlock
-            methods={methods}
             variant="server"
             parent="grpc.tls"
             disabled={!watchGrpcEnabled}
@@ -187,7 +187,6 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         </VerticalGroup>
         {httpEnableTLS && (
           <TlsBlock
-            methods={methods}
             variant="server"
             disabled={!watchHttpEnabled}
             parent="http.tls"
diff --git a/src/components/ComponentEditor/components/PrometheusExporterGithub.tsx b/src/components/ComponentEditor/components/PrometheusExporterGithub.tsx
index 74099e0..3aa96ab 100644
--- a/src/components/ComponentEditor/components/PrometheusExporterGithub.tsx
+++ b/src/components/ComponentEditor/components/PrometheusExporterGithub.tsx
@@ -1,20 +1,11 @@
-import {
-  FormAPI,
-  InlineField,
-  Input,
-  InputControl,
-  MultiSelect,
-  VerticalGroup,
-} from "@grafana/ui";
+import { InlineField, Input, MultiSelect, VerticalGroup } from "@grafana/ui";
+import { Controller, useFormContext } from "react-hook-form";
 
-const PrometheusExporterGithub = ({
-  methods,
-}: {
-  methods: FormAPI<Record<string, any>>;
-}) => {
+const PrometheusExporterGithub = () => {
   const commonOptions = {
     labelWidth: 14,
   };
+  const { register, control } = useFormContext();
   return (
     <VerticalGroup>
       <InlineField
@@ -22,26 +13,26 @@ const PrometheusExporterGithub = ({
         tooltip="API token to use to authenticate against GitHub."
         {...commonOptions}
       >
-        <Input {...methods.register("api_token")} />
+        <Input {...register("api_token")} />
       </InlineField>
       <InlineField
         label="api_token_file"
         tooltip="File containing API token to use to authenticate against GitHub."
         {...commonOptions}
       >
-        <Input {...methods.register("api_token_file")} />
+        <Input {...register("api_token_file")} />
       </InlineField>
       <InlineField
         label="api_token_file"
         tooltip="File containing API token to use to authenticate against GitHub. Takes precedence over api_token"
         {...commonOptions}
       >
-        <Input {...methods.register("api_token_file")} />
+        <Input {...register("api_token_file")} />
       </InlineField>
       {["organizations", "users", "repositories"].map((type) => {
         return (
           <InlineField label={type} key={type} {...commonOptions}>
-            <InputControl
+            <Controller
               render={({ field: { onChange, ...field } }) => (
                 <MultiSelect
                   {...field}
@@ -53,7 +44,7 @@ const PrometheusExporterGithub = ({
                 />
               )}
               defaultValue={[]}
-              control={methods.control}
+              control={control}
               name={type}
             />
           </InlineField>
diff --git a/src/components/ComponentEditor/components/PrometheusExporterMysql.tsx b/src/components/ComponentEditor/components/PrometheusExporterMysql.tsx
index 2629eaf..290bb35 100644
--- a/src/components/ComponentEditor/components/PrometheusExporterMysql.tsx
+++ b/src/components/ComponentEditor/components/PrometheusExporterMysql.tsx
@@ -1,21 +1,22 @@
-import { FormAPI, InlineField, Input } from "@grafana/ui";
+import { InlineField, Input } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 
-const PrometheusExporterMysql = ({
-  methods,
-}: {
-  methods: FormAPI<Record<string, any>>;
-}) => {
+const PrometheusExporterMysql = () => {
+  const {
+    register,
+    formState: { errors },
+  } = useFormContext();
   return (
     <>
       <InlineField
         label="Data Source Name"
         tooltip="Data Source Name for the MySQL server to connect to."
         error="The data source name is required"
-        invalid={!!methods.errors["data_source_name"]}
+        invalid={!!errors["data_source_name"]}
         labelWidth={20}
       >
         <Input
-          {...methods.register("data_source_name", { required: true })}
+          {...register("data_source_name", { required: true })}
           placeholder="root@(server-a:3306)/"
         />
       </InlineField>
diff --git a/src/components/ComponentEditor/components/PrometheusExporterRedis.tsx b/src/components/ComponentEditor/components/PrometheusExporterRedis.tsx
index 7208426..bd4b860 100644
--- a/src/components/ComponentEditor/components/PrometheusExporterRedis.tsx
+++ b/src/components/ComponentEditor/components/PrometheusExporterRedis.tsx
@@ -1,31 +1,26 @@
-import {
-  FormAPI,
-  InlineField,
-  InlineSwitch,
-  Input,
-  InputControl,
-  MultiSelect,
-} from "@grafana/ui";
+import { InlineField, InlineSwitch, Input, MultiSelect } from "@grafana/ui";
+import { Controller, useFormContext } from "react-hook-form";
 
-const PrometheusExporterRedis = ({
-  methods,
-}: {
-  methods: FormAPI<Record<string, any>>;
-}) => {
+const PrometheusExporterRedis = () => {
   const commonOptions = {
     labelWidth: 26,
   };
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext();
   return (
     <>
       <InlineField
         label="Redis Address"
         tooltip="Address (host and port) of the Redis instance to connect to."
         error="The redis address is required"
-        invalid={!!methods.errors["redis_addr"]}
+        invalid={!!errors["redis_addr"]}
         {...commonOptions}
       >
         <Input
-          {...methods.register("redis_addr", { required: true })}
+          {...register("redis_addr", { required: true })}
           placeholder="localhost:6379"
         />
       </InlineField>
@@ -34,35 +29,35 @@ const PrometheusExporterRedis = ({
         tooltip="User name to use for authentication (Redis ACL for Redis 6.0 and newer)."
         {...commonOptions}
       >
-        <Input {...methods.register("redis_user")} />
+        <Input {...register("redis_user")} />
       </InlineField>
       <InlineField
         label="Redis password"
         tooltip="Password of the Redis instance."
         {...commonOptions}
       >
-        <Input {...methods.register("redis_password")} />
+        <Input {...register("redis_password")} />
       </InlineField>
       <InlineField
         label="Redis password file"
         tooltip="Path of a file containing a password."
         {...commonOptions}
       >
-        <Input {...methods.register("redis_password_file")} />
+        <Input {...register("redis_password_file")} />
       </InlineField>
       <InlineField
         label="Connection timeout"
         tooltip="Timeout for connection to Redis instance (in Golang duration format)."
         {...commonOptions}
       >
-        <Input {...methods.register("connection_timeout")} placeholder="15s" />
+        <Input {...register("connection_timeout")} placeholder="15s" />
       </InlineField>
       <InlineField
         label="Cluster"
         tooltip="Whether the connection is to a Redis cluster."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("is_cluster")} />
+        <InlineSwitch {...register("is_cluster")} />
       </InlineField>
       <h6>Advanced Options</h6>
       <InlineField
@@ -70,56 +65,56 @@ const PrometheusExporterRedis = ({
         tooltip="Path of a JSON file containing a map of Redis URIs to passwords."
         {...commonOptions}
       >
-        <Input {...methods.register("redis_password_map_file")} />
+        <Input {...register("redis_password_map_file")} />
       </InlineField>
       <InlineField
         label="TLS client key file"
         tooltip="Name of the client key file (including full path) if the server requires TLS client authentication."
         {...commonOptions}
       >
-        <Input {...methods.register("tls_client_key_file")} />
+        <Input {...register("tls_client_key_file")} />
       </InlineField>
       <InlineField
         label="TLS client cert file"
         tooltip="Name of the client certificate file (including full path) if the server requires TLS client authentication."
         {...commonOptions}
       >
-        <Input {...methods.register("tls_client_cert_file")} />
+        <Input {...register("tls_client_cert_file")} />
       </InlineField>
       <InlineField
         label="TLS CA cert file"
         tooltip="Name of the CA certificate file (including full path) if the server requires TLS client authentication."
         {...commonOptions}
       >
-        <Input {...methods.register("tls_ca_cert_file")} />
+        <Input {...register("tls_ca_cert_file")} />
       </InlineField>
       <InlineField
         label="Skip tls verification"
         tooltip="Whether to to skip TLS verification."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("skip_tls_verification")} />
+        <InlineSwitch {...register("skip_tls_verification")} />
       </InlineField>
       <InlineField
         label="Namespace"
         tooltip="Namespace for the metrics."
         {...commonOptions}
       >
-        <Input {...methods.register("namespace")} placeholder="redis" />
+        <Input {...register("namespace")} placeholder="redis" />
       </InlineField>
       <InlineField
         label="Config command"
         tooltip="What to use for the CONFIG command."
         {...commonOptions}
       >
-        <Input {...methods.register("config_command")} placeholder="CONFIG" />
+        <Input {...register("config_command")} placeholder="CONFIG" />
       </InlineField>
       <InlineField
         label="Check keys"
         tooltip="List of key-patterns to export value and length/size, searched for with SCAN."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <MultiSelect
               {...field}
@@ -131,7 +126,7 @@ const PrometheusExporterRedis = ({
             />
           )}
           defaultValue={[]}
-          control={methods.control}
+          control={control}
           name="check_keys"
         />
       </InlineField>
@@ -140,7 +135,7 @@ const PrometheusExporterRedis = ({
         tooltip="List of Lua regular expressions (regex) for grouping keys."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <MultiSelect
               {...field}
@@ -152,7 +147,7 @@ const PrometheusExporterRedis = ({
             />
           )}
           defaultValue={[]}
-          control={methods.control}
+          control={control}
           name="check_keys_groups"
         />
       </InlineField>
@@ -163,7 +158,7 @@ const PrometheusExporterRedis = ({
       >
         <Input
           type="number"
-          {...methods.register("check_key_groups_batch_size", {
+          {...register("check_key_groups_batch_size", {
             valueAsNumber: true,
           })}
           placeholder="10000"
@@ -176,7 +171,7 @@ const PrometheusExporterRedis = ({
       >
         <Input
           type="number"
-          {...methods.register("max_distinct_key_groups", {
+          {...register("max_distinct_key_groups", {
             valueAsNumber: true,
           })}
           placeholder="100"
@@ -187,7 +182,7 @@ const PrometheusExporterRedis = ({
         tooltip="List of single keys to export value and length/size."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <MultiSelect
               {...field}
@@ -199,7 +194,7 @@ const PrometheusExporterRedis = ({
             />
           )}
           defaultValue={[]}
-          control={methods.control}
+          control={control}
           name="check_single_keys"
         />
       </InlineField>
@@ -208,7 +203,7 @@ const PrometheusExporterRedis = ({
         tooltip="List of stream-patterns to export info about streams, groups, and consumers to search for with SCAN."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <MultiSelect
               {...field}
@@ -220,7 +215,7 @@ const PrometheusExporterRedis = ({
             />
           )}
           defaultValue={[]}
-          control={methods.control}
+          control={control}
           name="check_streams"
         />
       </InlineField>
@@ -229,7 +224,7 @@ const PrometheusExporterRedis = ({
         tooltip="List of single streams to export info about streams, groups, and consumers."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <MultiSelect
               {...field}
@@ -241,7 +236,7 @@ const PrometheusExporterRedis = ({
             />
           )}
           defaultValue={[]}
-          control={methods.control}
+          control={control}
           name="check_single_streams"
         />
       </InlineField>
@@ -250,7 +245,7 @@ const PrometheusExporterRedis = ({
         tooltip="List of individual keys to export counts for."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <MultiSelect
               {...field}
@@ -262,7 +257,7 @@ const PrometheusExporterRedis = ({
             />
           )}
           defaultValue={[]}
-          control={methods.control}
+          control={control}
           name="count_keys"
         />
       </InlineField>
@@ -271,14 +266,14 @@ const PrometheusExporterRedis = ({
         tooltip="Path to Lua Redis script for collecting extra metrics."
         {...commonOptions}
       >
-        <Input {...methods.register("script_path")} />
+        <Input {...register("script_path")} />
       </InlineField>
       <InlineField
         label="Script paths"
         tooltip="	List of paths to Lua Redis scripts for collecting extra metrics."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           render={({ field: { onChange, ref, ...field } }) => (
             <MultiSelect
               {...field}
@@ -290,7 +285,7 @@ const PrometheusExporterRedis = ({
             />
           )}
           defaultValue={[]}
-          control={methods.control}
+          control={control}
           name="script_paths"
         />
       </InlineField>
@@ -299,49 +294,49 @@ const PrometheusExporterRedis = ({
         tooltip="Whether to scrape Client List specific metrics."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("export_client_list")} />
+        <InlineSwitch {...register("export_client_list")} />
       </InlineField>
       <InlineField
         label="Export client port"
         tooltip="Whether to include the client’s port when exporting the client list."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("export_client_port")} />
+        <InlineSwitch {...register("export_client_port")} />
       </InlineField>
       <InlineField
         label="Redis metrics only"
         tooltip="Whether to just export metrics or to also export go runtime metrics."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("redis_metrics_only")} />
+        <InlineSwitch {...register("redis_metrics_only")} />
       </InlineField>
       <InlineField
         label="Ping on connect"
         tooltip="Whether to ping the Redis instance after connecting."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("ping_on_connect")} />
+        <InlineSwitch {...register("ping_on_connect")} />
       </InlineField>
       <InlineField
         label="Include system metrics"
         tooltip="Whether to include system metrics (e.g. redis_total_system_memory_bytes)."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("incl_system_metrics")} />
+        <InlineSwitch {...register("incl_system_metrics")} />
       </InlineField>
       <InlineField
         label="Set client name"
         tooltip="Whether to set client name to redis_exporter."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("set_client_name")} />
+        <InlineSwitch {...register("set_client_name")} />
       </InlineField>
       <InlineField
         label="Tile38"
         tooltip="Whether to scrape Tile38-specific metrics."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("is_tile38")} />
+        <InlineSwitch {...register("is_tile38")} />
       </InlineField>
     </>
   );
diff --git a/src/components/ComponentEditor/components/PrometheusExporterUnix.tsx b/src/components/ComponentEditor/components/PrometheusExporterUnix.tsx
index d31abcf..475198d 100644
--- a/src/components/ComponentEditor/components/PrometheusExporterUnix.tsx
+++ b/src/components/ComponentEditor/components/PrometheusExporterUnix.tsx
@@ -1,12 +1,6 @@
 import { SelectableValue } from "@grafana/data";
-import {
-  FormAPI,
-  InlineField,
-  Input,
-  InlineSwitch,
-  InputControl,
-  MultiSelect,
-} from "@grafana/ui";
+import { InlineField, Input, InlineSwitch, MultiSelect } from "@grafana/ui";
+import { Controller, useFormContext } from "react-hook-form";
 
 const collectors = [
   {
@@ -466,10 +460,11 @@ const collectors = [
   },
 ];
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const commonOptions = {
     labelWidth: 25,
   };
+  const { register, control } = useFormContext();
   return (
     <>
       <h6>Basic Settings</h6>
@@ -478,12 +473,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Overrides the default set of enabled collectors with the collectors listed."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           name="set_collectors"
           render={({ field: { ref, ...field } }) => (
             <MultiSelect width={25} {...field} options={collectors} />
           )}
-          control={methods.control}
+          control={control}
         />
       </InlineField>
       <InlineField
@@ -491,7 +486,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="	Collectors to mark as enabled in addition to the default set."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           name="enable_collectors"
           render={({ field: { ref, ...field } }) => (
             <MultiSelect
@@ -500,7 +495,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
               options={collectors.filter((c) => !c.enabled)}
             />
           )}
-          control={methods.control}
+          control={control}
         />
       </InlineField>
       <InlineField
@@ -508,7 +503,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="	Collectors from the default set to mark as disabled."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           name="disable_collectors"
           render={({ field: { ref, ...field } }) => (
             <MultiSelect
@@ -517,7 +512,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
               options={collectors.filter((c) => c.enabled)}
             />
           )}
-          control={methods.control}
+          control={control}
         />
       </InlineField>
       <InlineField
@@ -525,28 +520,28 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Whether metrics about the exporter itself should be reported."
         {...commonOptions}
       >
-        <InlineSwitch {...methods.register("include_exporter_metrics")} />
+        <InlineSwitch {...register("include_exporter_metrics")} />
       </InlineField>
       <InlineField
         label="ProcFS Path"
         tooltip="The ProcFS mountpoint."
         {...commonOptions}
       >
-        <Input {...methods.register("procfs_path")} placeholder="/proc" />
+        <Input {...register("procfs_path")} placeholder="/proc" />
       </InlineField>
       <InlineField
         label="SysFS Path"
         tooltip="The SysFS mountpoint."
         {...commonOptions}
       >
-        <Input {...methods.register("sysfs_path")} placeholder="/sys" />
+        <Input {...register("sysfs_path")} placeholder="/sys" />
       </InlineField>
       <InlineField
         label="Root Path"
         tooltip="The root mountpoint."
         {...commonOptions}
       >
-        <Input {...methods.register("rootfs_path")} placeholder="/" />
+        <Input {...register("rootfs_path")} placeholder="/" />
       </InlineField>
     </>
   );
@@ -562,21 +557,21 @@ const PrometheusExporterUnix = {
       typeof data["set_collectors"][0] === "object"
     )
       data["set_collectors"] = data["set_collectors"]?.map(
-        (x: SelectableValue) => x.value
+        (x: SelectableValue) => x.value,
       );
     if (
       Array.isArray(data["enable_collectors"]) &&
       typeof data["enable_collectors"][0] === "object"
     )
       data["enable_collectors"] = data["enable_collectors"]?.map(
-        (x: SelectableValue) => x.value
+        (x: SelectableValue) => x.value,
       );
     if (
       Array.isArray(data["disable_collectors"]) &&
       typeof data["disable_collectors"][0] === "object"
     )
       data["disable_collectors"] = data["disable_collectors"]?.map(
-        (x: SelectableValue) => x.value
+        (x: SelectableValue) => x.value,
       );
     return data;
   },
diff --git a/src/components/ComponentEditor/components/PrometheusExporterWindows.tsx b/src/components/ComponentEditor/components/PrometheusExporterWindows.tsx
index 4e7d0c2..ded2da2 100644
--- a/src/components/ComponentEditor/components/PrometheusExporterWindows.tsx
+++ b/src/components/ComponentEditor/components/PrometheusExporterWindows.tsx
@@ -1,5 +1,6 @@
 import { SelectableValue } from "@grafana/data";
-import { FormAPI, InlineField, InputControl, MultiSelect } from "@grafana/ui";
+import { InlineField, MultiSelect } from "@grafana/ui";
+import { Controller, useFormContext } from "react-hook-form";
 import TypedInput from "../inputs/TypedInput";
 
 const collectors = [
@@ -168,7 +169,8 @@ const collectors = [
   },
 ];
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const { control } = useFormContext();
   const commonOptions = {
     labelWidth: 25,
   };
@@ -180,12 +182,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="List of collectors to enable."
         {...commonOptions}
       >
-        <InputControl
+        <Controller
           name="enabled_collectors"
           render={({ field: { ref, ...field } }) => (
             <MultiSelect width={25} {...field} options={collectors} />
           )}
-          control={methods.control}
+          control={control}
         />
       </InlineField>
       <InlineField
@@ -193,7 +195,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Configure timeout for collecting metrics."
         {...commonOptions}
       >
-        <TypedInput name="timeout" control={methods.control} />
+        <TypedInput name="timeout" control={control} />
       </InlineField>
     </>
   );
diff --git a/src/components/ComponentEditor/components/PrometheusRelabel.tsx b/src/components/ComponentEditor/components/PrometheusRelabel.tsx
index d53a124..88a3dfa 100644
--- a/src/components/ComponentEditor/components/PrometheusRelabel.tsx
+++ b/src/components/ComponentEditor/components/PrometheusRelabel.tsx
@@ -1,8 +1,13 @@
-import { FormAPI, InlineField } from "@grafana/ui";
+import { InlineField } from "@grafana/ui";
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 import { RelabelRules, transformRules } from "../common/RelabelRules";
+import { useFormContext } from "react-hook-form";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
   return (
     <>
       <InlineField
@@ -10,15 +15,15 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Where the metrics should be forwarded to, after relabeling takes place."
         labelWidth={22}
         error="You must specify a list of destinations"
-        invalid={!!methods.errors["targets"]}
+        invalid={!!errors["targets"]}
       >
         <ReferenceMultiSelect
           name="forward_to"
           exportName="PrometheusReceiver"
-          control={methods.control}
+          control={control}
         />
       </InlineField>
-      <RelabelRules methods={methods} />
+      <RelabelRules />
     </>
   );
 };
diff --git a/src/components/ComponentEditor/components/PrometheusRemoteWrite.tsx b/src/components/ComponentEditor/components/PrometheusRemoteWrite.tsx
index 6d1087b..95beccd 100644
--- a/src/components/ComponentEditor/components/PrometheusRemoteWrite.tsx
+++ b/src/components/ComponentEditor/components/PrometheusRemoteWrite.tsx
@@ -1,5 +1,4 @@
 import {
-  FormAPI,
   Input,
   Alert,
   LinkButton,
@@ -8,12 +7,18 @@ import {
   InlineField,
   InlineSwitch,
 } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 import AuthenticationEditor from "../common/AuthenticationEditor";
 import TlsConfig from "../common/TlsConfig";
 import MultiBlock from "../inputs/MultiBlock";
 import TypedInput from "../inputs/TypedInput";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext();
   const commonOptions = {
     labelWidth: 24,
   };
@@ -33,7 +38,6 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
       <MultiBlock
         name="endpoint"
         title="Endpoints"
-        methods={methods}
         newBlock={{
           enable_http2: true,
           send_exemplars: true,
@@ -52,12 +56,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                 label="Endpoint URL"
                 tooltip="Where to send metrics to"
                 error="An endpoint URL is required"
-                invalid={!!methods.errors["endpoint"]?.url}
+                invalid={!!errors["endpoint"]?.url}
                 {...commonOptions}
               >
                 <TypedInput
                   name={`endpoint[${index}].url` as const}
-                  control={methods.control}
+                  control={control}
                   defaultValue={field["url"]}
                 />
               </InlineField>
@@ -67,9 +71,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                 {...commonOptions}
               >
                 <InlineSwitch
-                  {...methods.register(
-                    `endpoint[${index}].send_exemplars` as const
-                  )}
+                  {...register(`endpoint[${index}].send_exemplars` as const)}
                   defaultChecked={field["send_exemplars"]}
                 />
               </InlineField>
@@ -79,21 +81,19 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                 {...commonOptions}
               >
                 <InlineSwitch
-                  {...methods.register(
-                    `endpoint[${index}].send_native_histograms` as const
+                  {...register(
+                    `endpoint[${index}].send_native_histograms` as const,
                   )}
                   defaultChecked={field["send_native_histograms"]}
                 />
               </InlineField>
               <AuthenticationEditor.Component
-                methods={methods}
                 parent={`endpoint[${index}]` as const}
                 defaultValue={field.auth_type}
               />
               <FieldSet label="Advanced settings">
                 <ControlledCollapse label="TLS Configuration">
                   <TlsConfig
-                    methods={methods}
                     parent={`endpoint[${index}].tls_config` as const}
                     defaultValues={field?.tls_config}
                   />
@@ -105,8 +105,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <InlineSwitch
-                      {...methods.register(
-                        `endpoint[${index}].metadata_config.send` as const
+                      {...register(
+                        `endpoint[${index}].metadata_config.send` as const,
                       )}
                       defaultChecked={field?.metadata_config?.send}
                     />
@@ -120,7 +120,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                       name={
                         `endpoint[${index}].metadata_config.send_interval` as const
                       }
-                      control={methods.control}
+                      control={control}
                       defaultValue={field?.metadata_config?.send_interval}
                     />
                   </InlineField>
@@ -131,8 +131,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <Input
                       type="number"
-                      {...methods.register(
-                        `endpoint[${index}].metadata_config.max_samples_per_send` as const
+                      {...register(
+                        `endpoint[${index}].metadata_config.max_samples_per_send` as const,
                       )}
                       defaultValue={
                         field?.metadata_config?.max_samples_per_send
@@ -148,7 +148,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <TypedInput
                       name={`endpoint[${index}].proxy_url` as const}
-                      control={methods.control}
+                      control={control}
                       defaultValue={field["proxy_url"]}
                     />
                   </InlineField>
@@ -159,7 +159,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <TypedInput
                       name={`endpoint[${index}].remote_timeout` as const}
-                      control={methods.control}
+                      control={control}
                       defaultValue={field["remote_timeout"]}
                     />
                   </InlineField>
@@ -169,8 +169,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <InlineSwitch
-                      {...methods.register(
-                        `endpoint[${index}].follow_redirects` as const
+                      {...register(
+                        `endpoint[${index}].follow_redirects` as const,
                       )}
                       defaultChecked={field["follow_redirects"]}
                     />
@@ -181,9 +181,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <InlineSwitch
-                      {...methods.register(
-                        `endpoint[${index}].enable_http2` as const
-                      )}
+                      {...register(`endpoint[${index}].enable_http2` as const)}
                       defaultChecked={field["enable_http2"]}
                     />
                   </InlineField>
@@ -196,8 +194,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <Input
                       type="number"
-                      {...methods.register(
-                        `endpoint[${index}].queue_config.capacity` as const
+                      {...register(
+                        `endpoint[${index}].queue_config.capacity` as const,
                       )}
                       defaultValue={field?.queue_config?.capacity}
                     />
@@ -209,8 +207,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <Input
                       type="number"
-                      {...methods.register(
-                        `endpoint[${index}].queue_config.min_shards` as const
+                      {...register(
+                        `endpoint[${index}].queue_config.min_shards` as const,
                       )}
                       defaultValue={field?.queue_config?.min_shards}
                     />
@@ -222,8 +220,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <Input
                       type="number"
-                      {...methods.register(
-                        `endpoint[${index}].queue_config.max_shards` as const
+                      {...register(
+                        `endpoint[${index}].queue_config.max_shards` as const,
                       )}
                       defaultValue={field?.queue_config?.max_shards}
                     />
@@ -234,8 +232,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                   >
                     <Input
                       type="number"
-                      {...methods.register(
-                        `endpoint[${index}].queue_config.max_samples_per_send` as const
+                      {...register(
+                        `endpoint[${index}].queue_config.max_samples_per_send` as const,
                       )}
                       defaultValue={field?.queue_config?.max_samples_per_send}
                     />
@@ -246,8 +244,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <Input
-                      {...methods.register(
-                        `endpoint[${index}].queue_config.batch_send_deadline` as const
+                      {...register(
+                        `endpoint[${index}].queue_config.batch_send_deadline` as const,
                       )}
                       defaultValue={field?.queue_config?.batch_send_deadline}
                     />
@@ -258,8 +256,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <Input
-                      {...methods.register(
-                        `endpoint[${index}].queue_config.min_backoff` as const
+                      {...register(
+                        `endpoint[${index}].queue_config.min_backoff` as const,
                       )}
                       defaultValue={field?.queue_config?.min_backoff}
                     />
@@ -270,8 +268,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <Input
-                      {...methods.register(
-                        `endpoint[${index}].queue_config.max_backoff` as const
+                      {...register(
+                        `endpoint[${index}].queue_config.max_backoff` as const,
                       )}
                       defaultValue={field?.queue_config?.max_backoff}
                     />
@@ -282,8 +280,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                     {...commonOptions}
                   >
                     <InlineSwitch
-                      {...methods.register(
-                        `endpoint[${index}].queue_config.retry_on_http_429` as const
+                      {...register(
+                        `endpoint[${index}].queue_config.retry_on_http_429` as const,
                       )}
                       defaultChecked={field?.queue_config?.retry_on_http_429}
                     />
@@ -301,30 +299,21 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
             tooltip="How frequently to clean up the WAL."
             {...commonOptions}
           >
-            <TypedInput
-              name="wal.truncate_frequency"
-              control={methods.control}
-            />
+            <TypedInput name="wal.truncate_frequency" control={control} />
           </InlineField>
           <InlineField
             label="Minimum keepalive time"
             tooltip="Minimum time to keep data in the WAL before it can be removed."
             {...commonOptions}
           >
-            <TypedInput
-              name="wal.min_keepalive_time"
-              control={methods.control}
-            />
+            <TypedInput name="wal.min_keepalive_time" control={control} />
           </InlineField>
           <InlineField
             label="Maximum keepalive time"
             tooltip="Maximum time to keep data in the WAL before removing it."
             {...commonOptions}
           >
-            <TypedInput
-              name="wal.max_keepalive_time"
-              control={methods.control}
-            />
+            <TypedInput name="wal.max_keepalive_time" control={control} />
           </InlineField>
         </ControlledCollapse>
       </FieldSet>
diff --git a/src/components/ComponentEditor/components/PrometheusScrape.tsx b/src/components/ComponentEditor/components/PrometheusScrape.tsx
index cd89f15..265d10a 100644
--- a/src/components/ComponentEditor/components/PrometheusScrape.tsx
+++ b/src/components/ComponentEditor/components/PrometheusScrape.tsx
@@ -1,7 +1,6 @@
 import {
   Collapse,
   FieldSet,
-  FormAPI,
   InlineField,
   InlineSwitch,
   Input,
@@ -13,8 +12,14 @@ import AuthenticationEditor from "../common/AuthenticationEditor";
 import { useState } from "react";
 import TypedInput from "../inputs/TypedInput";
 import TlsConfig from "../common/TlsConfig";
+import { useFormContext } from "react-hook-form";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext();
   const [tlsConfigOpen, setTlsConfigOpen] = useState(false);
   const [limitConfigOpen, setLimitConfigOpen] = useState(false);
   const [connConfigOpen, setConnConfigOpen] = useState(false);
@@ -29,13 +34,13 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           label="Forward to"
           tooltip="Receivers for the data scraped by this component"
           error="You must specify the destination"
-          invalid={!!methods.errors["forward_to"]}
+          invalid={!!errors["forward_to"]}
           {...commonOptions}
         >
           <ReferenceMultiSelect
             name="forward_to"
             exportName="PrometheusReceiver"
-            control={methods.control}
+            control={control}
           />
         </InlineField>
         <InlineField
@@ -43,53 +48,53 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           tooltip="How frequently to scrape the targets of this scrape config."
           {...commonOptions}
         >
-          <Input {...methods.register("scrape_interval")} placeholder="60s" />
+          <Input {...register("scrape_interval")} placeholder="60s" />
         </InlineField>
         <InlineField
           label="Scrape timeout"
           tooltip="The timeout for scraping targets of this config."
           {...commonOptions}
         >
-          <Input {...methods.register("scrape_timeout")} placeholder="10s" />
+          <Input {...register("scrape_timeout")} placeholder="10s" />
         </InlineField>
         <InlineField
           label="Metrics path"
           tooltip="The HTTP resource path on which to fetch metrics from targets."
           {...commonOptions}
         >
-          <Input placeholder="/metrics" {...methods.register("metrics_path")} />
+          <Input placeholder="/metrics" {...register("metrics_path")} />
         </InlineField>
         <InlineField
           label="Job name"
           tooltip="string	The job name to override the job label with. Defaults to the component name."
           {...commonOptions}
         >
-          <Input {...methods.register("job_name")} />
+          <Input {...register("job_name")} />
         </InlineField>
       </FieldSet>
-      <AuthenticationEditor.Component methods={methods} />
-      <TargetSelector.Component methods={methods} />
+      <AuthenticationEditor.Component />
+      <TargetSelector.Component />
       <FieldSet label="Advanced Configuration">
         <InlineField
           label="Extra metrics"
           tooltip="Whether extra metrics should be generated for scrape targets."
           {...commonOptions}
         >
-          <InlineSwitch {...methods.register("extra_metrics")} />
+          <InlineSwitch {...register("extra_metrics")} />
         </InlineField>
         <InlineField
           label="Honor timestamps"
           tooltip="Indicator whether the scraped timestamps should be respected."
           {...commonOptions}
         >
-          <InlineSwitch {...methods.register("honor_timestamps")} />
+          <InlineSwitch {...register("honor_timestamps")} />
         </InlineField>
         <InlineField
           label="Honor labels"
           tooltip="Indicator whether the scraped metrics should remain unmodified."
           {...commonOptions}
         >
-          <InlineSwitch {...methods.register("honor_labels")} />
+          <InlineSwitch {...register("honor_labels")} />
         </InlineField>
         <Collapse
           label="TLS Settings"
@@ -97,7 +102,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           onToggle={() => setTlsConfigOpen(!tlsConfigOpen)}
           collapsible
         >
-          <TlsConfig parent="tls_config" methods={methods} />
+          <TlsConfig parent="tls_config" />
         </Collapse>
         <Collapse
           label="Limit Configuration"
@@ -112,7 +117,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           >
             <Input
               type="number"
-              {...methods.register("body_size_limit", { valueAsNumber: true })}
+              {...register("body_size_limit", { valueAsNumber: true })}
             />
           </InlineField>
           <InlineField
@@ -122,7 +127,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           >
             <Input
               type="number"
-              {...methods.register("sample_limit", { valueAsNumber: true })}
+              {...register("sample_limit", { valueAsNumber: true })}
             />
           </InlineField>
           <InlineField
@@ -132,7 +137,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           >
             <Input
               type="number"
-              {...methods.register("target_limit", { valueAsNumber: true })}
+              {...register("target_limit", { valueAsNumber: true })}
             />
           </InlineField>
           <InlineField
@@ -142,7 +147,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           >
             <Input
               type="number"
-              {...methods.register("label_limit", { valueAsNumber: true })}
+              {...register("label_limit", { valueAsNumber: true })}
             />
           </InlineField>
           <InlineField
@@ -152,7 +157,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           >
             <Input
               type="number"
-              {...methods.register("label_name_length_limit", {
+              {...register("label_name_length_limit", {
                 valueAsNumber: true,
               })}
             />
@@ -164,7 +169,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           >
             <Input
               type="number"
-              {...methods.register("label_value_length_limit", {
+              {...register("label_value_length_limit", {
                 valueAsNumber: true,
               })}
             />
@@ -177,24 +182,20 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           collapsible
         >
           <InlineField label="Scheme" {...commonOptions}>
-            <TypedInput
-              control={methods.control}
-              name="scheme"
-              placeholder="http"
-            />
+            <TypedInput control={control} name="scheme" placeholder="http" />
           </InlineField>
           <InlineField
             label="Follow redirects"
             tooltip="Whether redirects returned by the server should be followed."
             {...commonOptions}
           >
-            <InlineSwitch {...methods.register("follow_redirects")} />
+            <InlineSwitch {...register("follow_redirects")} />
           </InlineField>
           <InlineField label="Enable HTTP2" {...commonOptions}>
-            <InlineSwitch {...methods.register("enable_http2")} />
+            <InlineSwitch {...register("enable_http2")} />
           </InlineField>
           <InlineField label="Proxy URL" {...commonOptions}>
-            <TypedInput control={methods.control} name="proxy_url" />
+            <TypedInput control={control} name="proxy_url" />
           </InlineField>
         </Collapse>
       </FieldSet>
diff --git a/src/components/ComponentEditor/components/PyroscopeScrape.tsx b/src/components/ComponentEditor/components/PyroscopeScrape.tsx
index 02f5202..f14f4da 100644
--- a/src/components/ComponentEditor/components/PyroscopeScrape.tsx
+++ b/src/components/ComponentEditor/components/PyroscopeScrape.tsx
@@ -1,10 +1,4 @@
-import {
-  Collapse,
-  FieldSet,
-  FormAPI,
-  InlineField,
-  InlineSwitch,
-} from "@grafana/ui";
+import { Collapse, FieldSet, InlineField, InlineSwitch } from "@grafana/ui";
 
 import ReferenceMultiSelect from "../inputs/ReferenceMultiSelect";
 import TypedInput from "../inputs/TypedInput";
@@ -12,6 +6,7 @@ import AuthenticationEditor from "../common/AuthenticationEditor";
 import TlsBlock from "../common/TlsBlock";
 import { useState } from "react";
 import TargetSelector from "../common/TargetSelector";
+import { useFormContext } from "react-hook-form";
 
 const ProfileOptions = [
   { label: "Memory", name: "memory" },
@@ -23,7 +18,7 @@ const ProfileOptions = [
   { label: "Custom", name: "custom" },
 ];
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const [tlsConfigOpen, setTlsConfigOpen] = useState(false);
   const [profilingConfigOpen, setProfilingConfigOpen] = useState(false);
 
@@ -31,6 +26,11 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
     labelWidth: 14,
   };
 
+  const {
+    control,
+    register,
+    formState: { errors },
+  } = useFormContext();
   return (
     <>
       <InlineField
@@ -38,16 +38,16 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
         tooltip="Receivers for the data scraped by this component"
         labelWidth={14}
         error="You must specify the destination"
-        invalid={!!methods.errors["forward_to"]}
+        invalid={!!errors["forward_to"]}
       >
         <ReferenceMultiSelect
           name="forward_to"
           exportName="ProfilesReceiver"
-          control={methods.control}
+          control={control}
         />
       </InlineField>
-      <AuthenticationEditor.Component methods={methods} />
-      <TargetSelector.Component methods={methods} />
+      <AuthenticationEditor.Component />
+      <TargetSelector.Component />
       <FieldSet label="Advanced Configuration">
         <Collapse
           label="TLS Settings"
@@ -55,7 +55,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           onToggle={() => setTlsConfigOpen(!tlsConfigOpen)}
           collapsible
         >
-          <TlsBlock parent="tls_config" methods={methods} variant={"client"} />
+          <TlsBlock parent="tls_config" variant={"client"} />
         </Collapse>
         <Collapse
           label="Profiling Configuration"
@@ -68,17 +68,14 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
             tooltip="The path prefix to use when scraping targets."
             {...commonOptions}
           >
-            <TypedInput
-              control={methods.control}
-              name="profiling_config.path_prefix"
-            />
+            <TypedInput control={control} name="profiling_config.path_prefix" />
           </InlineField>
           {ProfileOptions.map((o) => (
             <FieldSet label={<h5>{o.label}</h5>} key={o.name}>
               <InlineField label="Enabled" {...commonOptions}>
                 <InlineSwitch
-                  {...methods.register(
-                    `profiling_config.profile.${o.name}.enabled` as const
+                  {...register(
+                    `profiling_config.profile.${o.name}.enabled` as const,
                   )}
                 />
               </InlineField>
@@ -88,8 +85,8 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                 {...commonOptions}
               >
                 <InlineSwitch
-                  {...methods.register(
-                    `profiling_config.profile.${o.name}.delta` as const
+                  {...register(
+                    `profiling_config.profile.${o.name}.delta` as const,
                   )}
                 />
               </InlineField>
@@ -99,7 +96,7 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
                 {...commonOptions}
               >
                 <TypedInput
-                  control={methods.control}
+                  control={control}
                   name={`profiling_config.profile.${o.name}.path` as const}
                 />
               </InlineField>
diff --git a/src/components/ComponentEditor/components/modules/GrafanaCloudAutoConfigure.tsx b/src/components/ComponentEditor/components/modules/GrafanaCloudAutoConfigure.tsx
index c7cb28d..d45d017 100644
--- a/src/components/ComponentEditor/components/modules/GrafanaCloudAutoConfigure.tsx
+++ b/src/components/ComponentEditor/components/modules/GrafanaCloudAutoConfigure.tsx
@@ -1,10 +1,15 @@
-import { Alert, FormAPI, InlineField, VerticalGroup } from "@grafana/ui";
+import { Alert, InlineField, VerticalGroup } from "@grafana/ui";
+import { useFormContext } from "react-hook-form";
 import TypedInput from "../../inputs/TypedInput";
 
-const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
+const Component = () => {
   const commonOptions = {
     labelWidth: 25,
   };
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
   return (
     <>
       <VerticalGroup>
@@ -12,12 +17,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           label="Stack name"
           tooltip="Name of your stack as shown in the Grafana Cloud Console"
           error="The stack name is required"
-          invalid={!!methods.errors["arguments"]?.stack_name}
+          invalid={!!errors["arguments"]?.stack_name}
           {...commonOptions}
         >
           <TypedInput
             name="stack_name"
-            control={methods.control}
+            control={control}
             rules={{ required: true }}
           />
         </InlineField>
@@ -25,12 +30,12 @@ const Component = ({ methods }: { methods: FormAPI<Record<string, any>> }) => {
           label="Token"
           tooltip="Access policy token or API Key"
           error="The token is required"
-          invalid={!!methods.errors["arguments"]?.token}
+          invalid={!!errors["arguments"]?.token}
           {...commonOptions}
         >
           <TypedInput
             name="token"
-            control={methods.control}
+            control={control}
             rules={{ required: true }}
           />
         </InlineField>
diff --git a/src/components/ComponentEditor/index.tsx b/src/components/ComponentEditor/index.tsx
index 9ba9178..082ecf6 100644
--- a/src/components/ComponentEditor/index.tsx
+++ b/src/components/ComponentEditor/index.tsx
@@ -1,11 +1,4 @@
-import {
-  Form,
-  Field,
-  Input,
-  Button,
-  FormAPI,
-  HorizontalGroup,
-} from "@grafana/ui";
+import { Field, Input, Button, HorizontalGroup } from "@grafana/ui";
 import { faro } from "@grafana/faro-web-sdk";
 import { Block, toBlock } from "../../lib/river";
 import PrometheusRemoteWrite from "./components/PrometheusRemoteWrite";
@@ -38,6 +31,7 @@ import PrometheusExporterWindows from "./components/PrometheusExporterWindows";
 import LokiProcess from "./components/LokiProcess";
 import { useComponentContext } from "../../state";
 import ImportGit from "./components/ImportGit";
+import { FormProvider, useForm } from "react-hook-form";
 
 interface ComponentEditorProps {
   updateComponent: (component: Block) => void;
@@ -57,11 +51,7 @@ const ComponentEditor = ({
     preTransform,
     postTransform,
   }: {
-    Component: ({
-      methods,
-    }: {
-      methods: FormAPI<Record<string, any>>;
-    }) => JSX.Element;
+    Component: () => JSX.Element;
     preTransform: (data: Record<string, any>) => Record<string, any>;
     postTransform: (data: Record<string, any>) => Record<string, any>;
   } = (() => {
@@ -155,47 +145,54 @@ const ComponentEditor = ({
   formValues = preTransform(formValues);
   if (spec && spec.multi) formValues["label"] = component.label;
 
+  let methods = useForm({
+    defaultValues: formValues,
+  });
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = methods;
+  const onSubmit = ({
+    label,
+    ...args
+  }: {
+    [key: string]: any;
+    label: string;
+  }) => {
+    const transformed = postTransform(args);
+    updateComponent(
+      toBlock(
+        component.name,
+        transformed,
+        label,
+        KnownComponents[component.name],
+      )!,
+    );
+  };
+
   return (
-    <Form
-      onSubmit={({ label, ...args }) => {
-        const transformed = postTransform(args);
-        updateComponent(
-          toBlock(
-            component.name,
-            transformed,
-            label,
-            KnownComponents[component.name],
-          )!,
-        );
-      }}
-      defaultValues={formValues}
-      className={styles.form}
-    >
-      {(methods) => {
-        const { register, errors } = methods;
-        return (
-          <>
-            {spec && spec.multi && (
-              <Field
-                label="Label"
-                description="Component Label"
-                invalid={!!errors["label"]}
-                error="A label is required"
-              >
-                <Input {...register("label", { required: true })} />
-              </Field>
-            )}
-            <Component methods={methods} />
-            <HorizontalGroup>
-              <Button type="submit">Save</Button>
-              <Button onClick={discard} variant="secondary">
-                Discard
-              </Button>
-            </HorizontalGroup>
-          </>
-        );
-      }}
-    </Form>
+    <FormProvider {...methods}>
+      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        {spec && spec.multi && (
+          <Field
+            label="Label"
+            description="Component Label"
+            invalid={!!errors["label"]}
+            error="A label is required"
+          >
+            <Input {...register("label", { required: true })} />
+          </Field>
+        )}
+        <Component />
+        <HorizontalGroup>
+          <Button type="submit">Save</Button>
+          <Button onClick={discard} variant="secondary">
+            Discard
+          </Button>
+        </HorizontalGroup>
+      </form>
+    </FormProvider>
   );
 };
 
diff --git a/src/components/ComponentEditor/inputs/GenericStringMap.tsx b/src/components/ComponentEditor/inputs/GenericStringMap.tsx
index 121711f..083c6c3 100644
--- a/src/components/ComponentEditor/inputs/GenericStringMap.tsx
+++ b/src/components/ComponentEditor/inputs/GenericStringMap.tsx
@@ -1,12 +1,11 @@
 import {
   Button,
-  FieldArray,
   FieldSet,
   InlineField,
   InlineFieldRow,
   Input,
 } from "@grafana/ui";
-import { Control } from "react-hook-form";
+import { Control, useFieldArray } from "react-hook-form";
 
 const GenericStringMap = ({
   control,
@@ -17,43 +16,42 @@ const GenericStringMap = ({
   name: string;
   title: string;
 }) => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: `${name}` as const,
+  });
+
   return (
     <FieldSet label={<h5>{title}</h5>}>
-      <FieldArray control={control} name={`${name}` as const}>
-        {({ fields, append, remove }) => (
-          <>
-            {fields.map((field, index) => (
-              <InlineFieldRow key={field.id}>
-                <InlineField label="Key">
-                  <Input
-                    defaultValue={field["key"]}
-                    {...control.register(`${name}[${index}].key` as const)}
-                  />
-                </InlineField>
-                <InlineField label="Value">
-                  <Input
-                    defaultValue={field["value"]}
-                    {...control.register(`${name}[${index}].value` as const)}
-                  />
-                </InlineField>
-                <Button
-                  fill="outline"
-                  variant="secondary"
-                  icon="trash-alt"
-                  tooltip="Delete this entry"
-                  onClick={(e) => {
-                    remove(index);
-                    e.preventDefault();
-                  }}
-                />
-              </InlineFieldRow>
-            ))}
-            <Button onClick={() => append({})} icon="plus" variant="secondary">
-              Add
-            </Button>
-          </>
-        )}
-      </FieldArray>
+      {(fields as Array<Record<string, any>>).map((field, index) => (
+        <InlineFieldRow key={field.id}>
+          <InlineField label="Key">
+            <Input
+              defaultValue={field["key"]}
+              {...control.register(`${name}[${index}].key` as const)}
+            />
+          </InlineField>
+          <InlineField label="Value">
+            <Input
+              defaultValue={field["value"]}
+              {...control.register(`${name}[${index}].value` as const)}
+            />
+          </InlineField>
+          <Button
+            fill="outline"
+            variant="secondary"
+            icon="trash-alt"
+            tooltip="Delete this entry"
+            onClick={(e) => {
+              remove(index);
+              e.preventDefault();
+            }}
+          />
+        </InlineFieldRow>
+      ))}
+      <Button onClick={() => append({})} icon="plus" variant="secondary">
+        Add
+      </Button>
     </FieldSet>
   );
 };
diff --git a/src/components/ComponentEditor/inputs/LabelsInput.tsx b/src/components/ComponentEditor/inputs/LabelsInput.tsx
index bde0f2e..ff5d7ce 100644
--- a/src/components/ComponentEditor/inputs/LabelsInput.tsx
+++ b/src/components/ComponentEditor/inputs/LabelsInput.tsx
@@ -1,12 +1,11 @@
 import {
   Button,
-  FieldArray,
   FieldSet,
   InlineField,
   InlineFieldRow,
   Input,
 } from "@grafana/ui";
-import { Control } from "react-hook-form";
+import { Control, useFieldArray } from "react-hook-form";
 
 const LabelsInput = ({
   control,
@@ -15,43 +14,40 @@ const LabelsInput = ({
   control: Control<Record<string, any>>;
   name: string;
 }) => {
+  const { fields, append, remove } = useFieldArray({
+    name: `${name}` as const,
+  });
   return (
     <FieldSet label={<h5>Labels</h5>}>
-      <FieldArray control={control} name={`${name}` as const}>
-        {({ fields, append, remove }) => (
-          <>
-            {fields.map((field, index) => (
-              <InlineFieldRow key={field.id}>
-                <InlineField label="Key">
-                  <Input
-                    defaultValue={field["key"]}
-                    {...control.register(`${name}[${index}].key` as const)}
-                  />
-                </InlineField>
-                <InlineField label="Value">
-                  <Input
-                    defaultValue={field["value"]}
-                    {...control.register(`${name}[${index}].value` as const)}
-                  />
-                </InlineField>
-                <Button
-                  fill="outline"
-                  variant="secondary"
-                  icon="trash-alt"
-                  tooltip="Delete this label"
-                  onClick={(e) => {
-                    remove(index);
-                    e.preventDefault();
-                  }}
-                />
-              </InlineFieldRow>
-            ))}
-            <Button onClick={() => append({})} icon="plus" variant="secondary">
-              Add
-            </Button>
-          </>
-        )}
-      </FieldArray>
+      {(fields as Array<Record<string, any>>).map((field, index) => (
+        <InlineFieldRow key={field.id}>
+          <InlineField label="Key">
+            <Input
+              defaultValue={field["key"]}
+              {...control.register(`${name}[${index}].key` as const)}
+            />
+          </InlineField>
+          <InlineField label="Value">
+            <Input
+              defaultValue={field["value"]}
+              {...control.register(`${name}[${index}].value` as const)}
+            />
+          </InlineField>
+          <Button
+            fill="outline"
+            variant="secondary"
+            icon="trash-alt"
+            tooltip="Delete this label"
+            onClick={(e) => {
+              remove(index);
+              e.preventDefault();
+            }}
+          />
+        </InlineFieldRow>
+      ))}
+      <Button onClick={() => append({})} icon="plus" variant="secondary">
+        Add
+      </Button>
     </FieldSet>
   );
 };
diff --git a/src/components/ComponentEditor/inputs/MultiBlock.tsx b/src/components/ComponentEditor/inputs/MultiBlock.tsx
index cb5f946..fd51a06 100644
--- a/src/components/ComponentEditor/inputs/MultiBlock.tsx
+++ b/src/components/ComponentEditor/inputs/MultiBlock.tsx
@@ -1,60 +1,47 @@
 import { css } from "@emotion/css";
 import { GrafanaTheme2 } from "@grafana/data";
-import {
-  Button,
-  Card,
-  FieldArray,
-  FieldSet,
-  FormAPI,
-  IconButton,
-} from "@grafana/ui";
+import { Button, Card, FieldSet, IconButton } from "@grafana/ui";
+import { useFieldArray } from "react-hook-form";
 import { useStyles } from "../../../theme";
 
 const MultiBlock = ({
-  methods,
   name,
   title,
   children,
   newBlock,
 }: {
-  methods: FormAPI<Record<string, any>>;
   name: string;
   title: string;
   children: (
     field: Record<string, any>,
-    index: number
+    index: number,
   ) => React.ReactNode[] | React.ReactNode;
   newBlock?: any;
 }) => {
+  const { fields, append, remove } = useFieldArray({ name });
   const styles = useStyles(getStyles);
   newBlock = newBlock ?? {};
   return (
     <FieldSet label={title}>
-      <FieldArray control={methods.control} name={name}>
-        {({ fields, append, remove }) => (
-          <>
-            {fields.map((field, index) => (
-              <Card key={field.id} className={styles.card}>
-                {children(field, index)}
-                <Card.SecondaryActions>
-                  <IconButton
-                    key="delete"
-                    name="trash-alt"
-                    tooltip="Delete this filter"
-                    onClick={(e) => {
-                      remove(index);
-                      e.preventDefault();
-                    }}
-                  />
-                </Card.SecondaryActions>
-              </Card>
-            ))}
-            <Button onClick={() => append(newBlock)} icon="plus">
-              Add
-            </Button>
-          </>
-        )}
-      </FieldArray>
+      {fields.map((field, index) => (
+        <Card key={field.id} className={styles.card}>
+          {children(field, index)}
+          <Card.SecondaryActions>
+            <IconButton
+              key="delete"
+              name="trash-alt"
+              tooltip="Delete this filter"
+              onClick={(e) => {
+                remove(index);
+                e.preventDefault();
+              }}
+            />
+          </Card.SecondaryActions>
+        </Card>
+      ))}
+      <Button onClick={() => append(newBlock)} icon="plus">
+        Add
+      </Button>
     </FieldSet>
   );
 };
diff --git a/src/components/ComponentEditor/inputs/ReferenceMultiSelect.tsx b/src/components/ComponentEditor/inputs/ReferenceMultiSelect.tsx
index 27d394a..0dc0584 100644
--- a/src/components/ComponentEditor/inputs/ReferenceMultiSelect.tsx
+++ b/src/components/ComponentEditor/inputs/ReferenceMultiSelect.tsx
@@ -1,6 +1,6 @@
 import { SelectableValue } from "@grafana/data";
-import { InputControl, MultiSelect } from "@grafana/ui";
-import { get } from "react-hook-form";
+import { MultiSelect } from "@grafana/ui";
+import { Controller, get } from "react-hook-form";
 import { useState } from "react";
 
 import { useComponentContext } from "../../../state";
@@ -26,7 +26,7 @@ const ReferenceMultiSelect = ({
     exportName,
   );
   return (
-    <InputControl
+    <Controller
       defaultValue={value}
       render={({ field: { onChange, ref, ...field } }) => (
         <MultiSelect
diff --git a/src/components/ComponentEditor/inputs/ReferenceSelect.tsx b/src/components/ComponentEditor/inputs/ReferenceSelect.tsx
index 89475e7..800e396 100644
--- a/src/components/ComponentEditor/inputs/ReferenceSelect.tsx
+++ b/src/components/ComponentEditor/inputs/ReferenceSelect.tsx
@@ -1,6 +1,6 @@
 import { SelectableValue } from "@grafana/data";
-import { Select, InputControl } from "@grafana/ui";
-import { get } from "react-hook-form";
+import { Select } from "@grafana/ui";
+import { Controller, get } from "react-hook-form";
 import { useState } from "react";
 
 import { useComponentContext } from "../../../state";
@@ -26,7 +26,7 @@ const ReferenceSelect = ({
     exportName,
   );
   return (
-    <InputControl
+    <Controller
       render={({ field: { onChange, ref, ...field } }) => (
         <Select
           {...field}
diff --git a/src/components/ComponentEditor/inputs/TypedInput.tsx b/src/components/ComponentEditor/inputs/TypedInput.tsx
index 1bfbc93..eddfad8 100644
--- a/src/components/ComponentEditor/inputs/TypedInput.tsx
+++ b/src/components/ComponentEditor/inputs/TypedInput.tsx
@@ -1,13 +1,6 @@
 import * as React from "react";
-import {
-  Dropdown,
-  IconButton,
-  IconName,
-  Input,
-  InputControl,
-  Menu,
-} from "@grafana/ui";
-import { Control, get } from "react-hook-form";
+import { Dropdown, IconButton, IconName, Input, Menu } from "@grafana/ui";
+import { Control, Controller, get } from "react-hook-form";
 
 type Type = "literal" | "reference" | "env";
 
@@ -47,7 +40,7 @@ const TypedInput = ({
   width,
 }: {
   name: string;
-  control: Control<Record<string, any>>;
+  control: Control<any>;
   rules?: Object;
   placeholder?: string;
   defaultValue?: Record<string, any> | string;
@@ -82,7 +75,7 @@ const TypedInput = ({
   );
   const types = Object.keys(InputTypes);
   return (
-    <InputControl
+    <Controller
       name={name}
       control={control}
       rules={rules || {}}
@@ -118,7 +111,7 @@ const TypedInput = ({
             </Dropdown>
           }
           value={inputValue}
-          type={inputType !== "literal" ? "text" : type ?? "text"}
+          type={inputType !== "literal" ? "text" : (type ?? "text")}
           onChange={(v) => {
             setInputValue(v.currentTarget.value);
             onChange(outValue(v.currentTarget.value, inputType));
diff --git a/src/lib/components.ts b/src/lib/components.ts
index d0c4318..e8a9dda 100644
--- a/src/lib/components.ts
+++ b/src/lib/components.ts
@@ -1,7 +1,6 @@
 import Parser from "web-tree-sitter";
 import * as monaco from "monaco-editor";
 import { Attribute, Block } from "./river";
-import { FormAPI } from "@grafana/ui";
 import GrafanaCloudAutoconfigure from "../components/ComponentEditor/components/modules/GrafanaCloudAutoConfigure";
 
 type LiteralType =
@@ -132,11 +131,7 @@ export class ComponentType extends BlockType {
 }
 
 export interface ComponentForm {
-  Component: ({
-    methods,
-  }: {
-    methods: FormAPI<Record<string, any>>;
-  }) => JSX.Element;
+  Component: () => JSX.Element;
   preTransform: (data: Record<string, any>) => Record<string, any>;
   postTransform: (data: Record<string, any>) => Record<string, any>;
 }