Submission not reactive in JSX ?

export default function LoginPage() {
  const login = action(async (formData: FormData) => {
      const username = String(formData.get('username'))
      const password = String(formData.get('password'))
  
      console.log('login', username, password)
      await sleep(1000)
      return true
  }, 'login')
  
  const submission = useSubmission(login)
  const disabled = () => submission.pending === true;
  
  createEffect(() => {
      console.log('Logging in: ', disabled())
  })

return (
  <main class="w-full min-h-screen flex flex-col justify-center items-center gap-12">
    <h1 class="text-3xl">Admin Login</h1>
    <p>disabled: {disabled() ? 'yes' : 'no'}</p>
    <form action={login} method='post' class="flex-col flex gap-4">
    ....
    </form>
  </main>
  );
};

export default function LoginPage() {
  const login = action(async (formData: FormData) => {
      const username = String(formData.get('username'))
      const password = String(formData.get('password'))
  
      console.log('login', username, password)
      await sleep(1000)
      return true
  }, 'login')
  
  const submission = useSubmission(login)
  const disabled = () => submission.pending === true;
  
  createEffect(() => {
      console.log('Logging in: ', disabled())
  })

return (
  <main class="w-full min-h-screen flex flex-col justify-center items-center gap-12">
    <h1 class="text-3xl">Admin Login</h1>
    <p>disabled: {disabled() ? 'yes' : 'no'}</p>
    <form action={login} method='post' class="flex-col flex gap-4">
    ....
    </form>
  </main>
  );
};