Is useSubmission() not reactive?

const ContactPage: Component = () => {
  const [messageSent, setMessageSent] = createSignal(false);
  const submission = useSubmission(submitMessageAction);
  const [serverError, setServerError] = createSignal("");

  createEffect(() => {
    logger.debug("Responding to Action");
    const { error, result } = submission;
    if (error) {
      setServerError(error.message);
    }

    if (result) {
      logger.debug("Form submitted successfully.");
      if (result.statusCode === 200) {
        setMessageSent(true);
      }
    }
  });
  
  return (
    <MainLayout>
      <Title>Contact - {siteName}</Title>
      <main class="px-6 py-8 lg:px-8">
        <PageHeader heading="Questions? Concerns? Or Just Want to Reach Out?" />
        <section class=" mt-16 mx-auto max-w-2xl text-center">
          <Show
            when={!messageSent()}
            fallback={
              ...
            }
          >
            <Form action={submitMessageAction}>
              <Show when={submission.error}>
                <span>{(submission.error as Error).message}</span>
              </Show>
              <TextField
                autocomplete="first_name"
                id="first-name"
                name="first-name"
                placeholder="First Name"
                edited={message.nameEdited.first}
                onChange={(newValue) =>
                  updateFirstName(newValue.currentTarget.value)
                }
                validator={() => message.nameError.first}
              />
              <TextField
                autocomplete="last_name"
                id="last-name"
                name="last-name"
                placeholder="Last Name"
                edited={message.nameEdited.last}
                onChange={(event) => updateLastName(event.currentTarget.value)}
                validator={() => message.nameError.last}
              />
              <TextField
                autocomplete="email"
                id="email"
                name="email"
                placeholder="Email Address"
                type="email"
                edited={message.emailEdited}
                onChange={(event) => updateEmail(event.currentTarget.value)}
                validator={() => message.emailError}
              />
              <TextField
                id="subject"
                name="subject"
                placeholder="Subject"
                edited={message.subjectEdited}
                onChange={(event) => updateSubject(event.currentTarget.value)}
                validator={() => message.subjectError}
              />
              <TextArea
                name="message"
                id="message"
                rows={8}
                placeholder="Your Message"
                edited={message.messageEdited}
                onChange={(event) => updateMessage(event.currentTarget.value)}
                validator={() => message.messageError}
              />
              <PrimaryActionButton
                text={
                  submission.pending ? "Sending message..." : "Send Message"
                }
                type="submit"
                disabled={!canSendMessage() && !submission.pending}
              />
            </Form>
          </Show>
        </section>
      </main>
    </MainLayout>
  );