Why is my actionData undefined in my Shopify app?

Question

Here is my app._index.jsx, everything is showing up fine but my actionData is always undefined. I've added a bunch of logging to find the culprit, but i am just not seeing it. The query runs fine and returns data. Perhaps i am not fully understanding how to use action data?

import {
  Page,
  Text,
  VerticalStack,
  Card,
  List,
  Checkbox,
  Button
} from "@shopify/polaris";
import { useActionData } from "@remix-run/react";
import { authenticate } from "../shopify.server";

export const loader = async ({ request }) => {
  console.log("Loader function called");

  const { admin } = await authenticate.admin(request);
  console.log("Loader authenticated");

  try {
    const response = await admin.graphql(
      `#graphql
        query {
          products(first: 10) {
            edges {
              node {
                id
                title
              }
            }
          }
        }`
    );
    const responseJson = await response.json();
    console.log("GraphQL Response:", JSON.stringify(responseJson));
    return { actionData: { products: responseJson.data.products.edges.map(({ node }) => node) } };
  } catch (error) {
    console.log("Loader error:", error);
    throw error;
  }
};


export default function Index() {
  const actionData = useActionData();
  const products = actionData?.products || [];

  return (
    <Page>
      <ui-title-bar title="MyApp app"></ui-title-bar>
      <VerticalStack gap="5">
        <Card>
          <Text as="h1">Welcome to the MyApp app</Text>
          <Text as="p">This app helps you manage your merchandise.</Text>
          <Button primary onClick={() => console.log(actionData)}>Log this</Button>
        </Card>
        <Card>
          <Text as="h2">Products for Sale</Text>
          <List>
            {products.map((product) => (
              <List.Item key={product.id}>
                <Checkbox label={product.title} />
              </List.Item>
            ))}
          </List>
        </Card>
      </VerticalStack>
    </Page>
  );
}

22:58:50 │ remix │ [shopify-app/INFO] Authenticating admin request
22:58:50 │ remix │ Loader function called
22:58:50 │ remix │ [shopify-app/INFO] Authenticating admin request
22:58:50 │ remix │ Loader authenticated
22:58:50 │ remix │ GraphQL Response: {"data":{"products":{"edges":[{"node":{"id":"gid://shopify/Product/872","title":"t
est"}},{"node":{"id":"gid://shopify/Product/872","title":"Green Snowboard"}}]}},"extensions":{"cost":{"requestedQueryCo
st":12,"actualQueryCost":4,"throttleStatus":{"maximumAvailable":1000,"currentlyAvailable":996,"restoreRate":50}}}}
22:58:50 │ remix │ Action data in component: undefined

Here are the logs from the remix console