How to save data to metafields from checkout extension

[Turbofan1178]

I am building a checkout extension that saves a metafield on the customer and order objects but when I checkout and check the metafields with graphql, I don't see it. Here's what my code looks like.

App.jsx

import React, { useState } from "react";
import {
  reactExtension,
  TextField,
  Text,
  BlockStack,
  InlineStack,
  ChoiceList,
  Choice,
  useApplyMetafieldsChange,
  useMetafield,
} from "@shopify/ui-extensions-react/checkout";


function App() {
  const [option, setOption] = useState("none");
  const METAFIELD_NAMESPACE = "metafield_namespace_1";
  const METAFIELD_KEY = "metafield_key_1";
  const INFO_METAFIELD_NAMESPACE = "metafield_namespace_2";
  const INFO_METAFIELD_KEY = "metafield_key_2";

  const metafield_ref_1 = useMetafield({
    namespace: METAFIELD_NAMESPACE,
    key: METAFIELD_KEY,
  });

  const metafield_ref_2 = useMetafield({
    namespace: INFO_METAFIELD_NAMESPACE,
    key: INFO_METAFIELD_KEY,
  });

  const applyMetafieldsChange = useApplyMetafieldsChange();

  const handleChange = (value) => {
    setOption(value);
    applyMetafieldsChange({
      type: "updateMetafield", 
      namespace: METAFIELD_NAMESPACE, 
      key: METAFIELD_KEY, 
      valueType: "string", 
      value
    });
  };

  const handleFieldChange = (value) => {
    applyMetafieldsChange({
      type: "updateMetafield", 
      namespace: INFO_METAFIELD_NAMESPACE, 
      key: INFO_METAFIELD_KEY, 
      valueType: "string", 
      value
    });
  };

  const shouldRenderField = (preference) => {
    return metafield_ref_1?.value === preference || option === preference;
  }
  const preferences = {"preference_1":"Preference 1", "preference_2":"Preference 2", "preference_3":"Preference 3"}
  return (
    <BlockStack>
      <ChoiceList
        name="choice"
        value={metafield_ref_1?.value || option}
        onChange={handleChange}
      >
        <InlineStack>
          {Object.values(preferences).map((preference) => (
            <Choice key={preference} id={preference}>{preference.charAt(0).toUpperCase() + preference.slice(1)}</Choice>
          ))}
        </InlineStack>
      </ChoiceList>

      {shouldRenderField(preferences.preference_1) && (
        <TextField 
          value={metafield_ref_2?.value}
          label="A"
          onChange={handleFieldChange}
        />
      )}
      {shouldRenderField(preferences.preference_2) && (
        <TextField
          value={metafield_ref_2?.value}
          label="B"
          onChange={handleFieldChange}
        />
      )}
      {shouldRenderField(preferences.preference_3) && (
        <TextField
          value={metafield_ref_2?.value}
          label="C"
          onChange={handleFieldChange}
        />
      )}
    </BlockStack>
  );
}

export default reactExtension(
  "purchase.checkout.contact.render-after",
  () => <App />
);

shopify.extension.toml

[[extensions.metafields]]
namespace = "metafield_namespace_1"
key = "metafield_key_1"

[[extensions.metafields]]
namespace = "metafield_namespace_2"
key = "metafield_key_2"

graph ql response

{
  "data": {
    "orders": {
      "edges": [
        {
          "node": {
            "id": "gid://shopify/Order/5338841186624",
            "metafields": {
              "edges": []
            }
          }
        }
      ]
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 6,
      "actualQueryCost": 5,
      "throttleStatus": {
        "maximumAvailable": 1000,
        "currentlyAvailable": 977,
        "restoreRate": 50
      }
    }
  }
}