How to save data to metafields from checkout extension

Retired Boards Appdev Extensions
,
1

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 (
    
  );
}

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

**shopify.extension.toml**

```python
[[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
      }
    }
  }
}