I have a medusajs ecommerce project and trying to send a simple customer-inputted string from my frontend to my backend where it can be displayed on my admin dashboard for every order I receive. A way to do that they said was to add a property to the metadata object, which every entity has. The other way was to extend an entity/validator/use migration files etc but this was the simplest only other way.

Some old comments describe that I can pass metadata to the cart entity when a customer is making an order. I can’t for the life of me figure it out and obviously not that experienced with web dev

export default CustomString
"use client"

import { Heading, Text, clx } from "@medusajs/ui"
import React, { useState, useEffect, useMemo } from "react"
import { useSearchParams } from "next/navigation"
import { Cart } from "@medusajs/medusa"
import Input from "@modules/common/components/input"
const CustomString = ({
cart,

}: {
 cart: Omit<Cart, "refundable_amount" | "refunded_total"> 

}) => {

const [formData, setFormData] = useState({
    "cart.metadata": {"customString" : cart?.metadata || ""},
})

const searchParams = useSearchParams()
const isOpen = searchParams.get("step") === "review"

const previousStepsCompleted =
 cart.shipping_address &&
 cart.shipping_methods.length > 0 &&
 cart.payment_session

useEffect(() => {
    setFormData({
      "cart.metadata": {"customString" : cart?.metadata || ""},
      
    })
  }, [cart?.metadata])

const handleChange = (
    e: React.ChangeEvent<
      HTMLInputElement | HTMLInputElement | HTMLSelectElement
    >
  ) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }
return (
 <div>
  {isOpen && previousStepsCompleted && (
    <>
      <div className="flex items-start gap-x-1 w-full mb-6">

          <Input
          label="Custom String"
          name="cart.metadata"
          maxLength={11}
          value= { cart?.metadata} //I get errors here
          onChange={handleChange}

          />

      </div>
    </>
  )}
</div>
)
}

export default CustomString

This is my custom element where a user is supposed to enter a string. One of the errors I get is “Type ‘Record<string, unknown>’ is not assignable to type ‘string | number | readonly string[] | undefined. Type ‘Record<string, unknown>’ is missing the following properties from type ‘readonly string[]’: length, concat, join, slice, and 26 more.ts(2322)”. How exactly can I accomplish this task? Any pointers are appreciated