Why is useActionData returning undefined in my Shopify remix run code?

Shopify Apps
1

Hey, I’m studing shopify and remis and I don’t understand how is useActionData working.
There’s the code:

import {useState} from "react";
import { json } from "@remix-run/node";
import {
  Page,
  Layout,
  EmptyState,
} from "@shopify/polaris";
import ProductList from "../../components/ProductList";
import {useActionData, useSubmit} from "@remix-run/react";

export async function action({ request }) {
  return json({
    data: request.data,
    number: 12,
  });
}

export default function Index() {
  const [selectedIds, setSelectedIds] = useState([]);
  const submit = useSubmit();
  const actionData = useActionData();
  console.log(actionData?.data)

  const doIt = async () => {
    const selected = await shopify.resourcePicker({type: 'product', action: 'select', multiple: true});
    if (selected?.length) {
      setSelectedIds(selected);
      submit({data: selected})
    }
  }

  let isEmptyState = !selectedIds.length;

  return (
    <Page>
      <Layout>
        <Layout.Section>
            {
              isEmptyState ? <EmptyState
                heading="Manage your inventory transfers"
                action={{content: 'Add transfer1123', onAction: doIt}}
                image="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png"
              />
                :  <ProductList />
            }
            <div>{actionData?.toString() || 'no'}</div>
        </Layout.Section>
      </Layout>
    </Page>
  );
}

And I have a second question. How I can do gql calls from my custom functions (not action).
Thanks!