How to update a order metafield using new shopify checkout ui extensions[urgent].

[testingdev]

I am trying to add data to a order meta field using shopify checkout ui  extensions.
trying to figure out a way  when a transaction or order placement is completed then how to pass/update data in order metafields.
my code works when I do it other way that is creating an input in ui and getting its value to pass it to applymetafieldchanges hook but is there any way i can directly update metafield data.
below is code that i want to change 

import React, { useState } from "react";
import {
reactExtension,
TextField,
BlockStack,
useApplyMetafieldsChange,
useMetafield,
Checkbox,
useBuyerJourneyCompleted,
} from "@shopify/ui-extensions-react/checkout";

// Set the entry point for the extension
export default reactExtension("purchase.checkout.shipping-option-list.render-after", () => <App />);

function App() {
// Set up the checkbox state
const [checked, setChecked] = useState(false);

// Define the metafield namespace and key
const metafieldNamespace = "details";
const metafieldKey = "date";

// Get a reference to the metafield
const deliveryInstructions = useMetafield({
namespace: metafieldNamespace,
key: metafieldKey,
});
// Set a function to handle updating a metafield
const applyMetafieldsChange = useApplyMetafieldsChange();

// Set a function to handle the Checkbox component's onChange event
const handleChange = () => {
setChecked(!checked);
};
// Render the extension components
return (
<BlockStack>
<Checkbox checked={checked} onChange={handleChange}>
Provide delivery instructions
</Checkbox>
{checked && (
<TextField
label="Delivery instructions"
multiline={3}
onChange={(value) => {
// Apply the change to the metafield
applyMetafieldsChange({
type: "updateMetafield",
namespace: metafieldNamespace,
key: metafieldKey,
valueType: "string",
value,
});
}}
value={deliveryInstructions?.value}
/>
)}
</BlockStack>
);
}

[EasifyApps-Zoe]

Hi @testingdev,

I have a simpler solution for you to create custom fields without coding. You can use the Free version of the Easify Product Options app. It only takes a few minutes to set up! Here's a quick demo on how to do it:

• Create a new option set:

• Add a Checkbox for customers to select "Provide delivery instructions" or not.

• Add a Text Area for customers to enter "Delivery instructions" if they select the checkbox using Conditional Logic

• Finally, assign the option set to your relevant products, and you're good to go:

I believe this method is super easy, and you should definitely try the app. However, if you still prefer custom code, feel free to ignore my suggestion 😊.