Triggering a form submission from outside the form component

[JUNIORCO]

Say I have a component like this:

export const SomeComponent = () => {
  const [open, setOpen] = useState(false);
  const formContext = useFormContext("SomeForm");

  const handleConnectClick = (e) => {
    e.preventDefault();
    formContext.submit();
  };

  const onSubmitSuccess = () => {
    setOpen(false);
  };

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
        <...>

        <SomeForm onSubmitSuccess={onSubmitSuccess} />

        <Flex>
          <Dialog.Close>
            <Button>
              Cancel
            </Button>
          </Dialog.Close>
          <Dialog.Close>
            <Button onClick={handleConnectClick}>Connect</Button>
          </Dialog.Close>
        </Flex>
      </Dialog.Content>
    </Dialog.Root>
  );
};

With this form:

export const SomeForm = ({ onSubmitSuccess }) => {
  const fetcher = useFetcher();

  useEffect(() => {
    if (fetcher.state === "idle" && fetcher.data) {
      onSubmitSuccess();
    }
  }, [fetcher.state, fetcher.data]);

  return (
    <ValidatedForm
      id={"SomeForm"}
      fetcher={fetcher}
      validator={someValidator}
      method={"POST"}
      action={Routes.PATH_API.someRoute}
    >
        <FormInput ... />
    </ValidatedForm>
  );
};

Right now with the above setup, the form isn't being submitted. I'm a bit confused as to why this isn't working because the docs mention that hooks outside of forms is possible.

Do I have something setup wrong here?