How to connect ReactComponentInfo to ExtensionPoint

[Isaac_Apodaca]

I’m creating a new service connection type by extending the ServiceConnectorExtensionPoint Object. I’m creating a react component for the form. My question is how to enable the “Create Connection” button on the service connection modal? I only want it to be enabled when all form validations have passed. I’m using the ignition react packages. Here are a couple examples of my code and a screenshot. Thanks in advance!

Extension Point Class

@Override
public Optional<WebUiComponent> getWebUiComponent(ComponentType type) {
    if (type == ComponentType.ADD_FORM || type == ComponentType.EDIT_FORM) {
        ReactComponentInfo info = new ReactComponentInfo("ServiceConnection",
                GatewayHook.getJsModule());
        return Optional.of(info);
    }

    return Optional.empty();
}

React Component

import React from "react";
import {
  Card,
  Form,
  FormControlInput,
  TextInput,
  // @ts-ignore
} from "@inductiveautomation/ignition-web-ui";

import "./_styles.scss";
import { useForm } from "react-hook-form";

const ConnectionPage = () => {
  const form = useForm({ mode: "onChange" });

  return (
    <div className="main-content">
      <Card title="General">
        <Form context={form}>
          <FormControlInput
            description="The name of your connection."
            id="name"
            input={<TextInput />}
            label="Name *"
            name="name"
            otherProps={{ rules: { required: true } }}
          />
        </Form>
      </Card>
    </div>
  );
};

export default ConnectionPage;

Screenshot