I'm currently in process of migrating my app from Pages API to Server Actions and wanted to display loading state with useFormStatus. Currently, I have the following component:

'use client';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

import { sampleAction } from '@/action/sample';

const SampleForm = () => {
  const { pending } = useFormStatus();

  return (
    <form action={sampleAction}>
      <div>
        <label htmlFor="sample">
          Sample
        </label>
        <input
          type="text"
          id="sample"
          name="sample"
        />
      </div>

      <button
        disabled={pending}
      >
        {pending ? 'Loading...' : 'Submit'}
      </button>
    </form>
  );
};

In this component, pending is never true when I submitted the form. However, when I separated the button into a separated component like:

'use client';

import { experimental_useFormStatus as useFormStatus } from 'react-dom';

import { sampleAction } from '@/action/sample';

const SampleForm = () => {
  return (
    <form action={sampleAction}>
      <div>
        <label htmlFor="sample">
          Sample
        </label>
        <input
          type="text"
          id="sample"
          name="sample"
        />
      </div>

      <Button />
    </form>
  );
};

const Button = () => {
  const { pending } = useFormStatus();

  return (
    <button
      disabled={pending}
    >
      {pending ? 'Loading...' : 'Submit'}
    </button>
  );
};

export default SampleForm;

it does works flawlessly.

Why is Code 1 not working while Code 2 works completely fine? As for as I have known, it shouldn't be an issue when I separate the component or not as long as the component is a client component.