Getting error following tutorial

[nikitavoloboev]

My code:

import Card from "../../components/Card"
import Container from "../../components/Container"
import { z } from "zod"
import { TextField } from "../../components/TextField"
import { createTsForm } from "@ts-react/form"

const mapping = [[z.string(), TextField]] as const

const MyForm = createTsForm(mapping)

export default function SearchPage() {
  const FindOrderSchema = z.object({
    email: z.string().email("Enter a real email please."),
    orderNumber: z.string(),
  })

  function onSubmit(data: z.infer<typeof FindOrderSchema>) {
    // gets typesafe data when form is submitted
  }

  return (
    <>
      <Container>
        <Card
          title="Exchange or return your order"
          subtitle="Enter your details to find your order"
        >
          <MyForm
            schema={FindOrderSchema}
            onSubmit={onSubmit}
            renderAfter={() => <button type="submit">Submit</button>}
          />
        </Card>
      </Container>
    </>
  )
}

Getting this error though trying to open the page.

Not sure why. My TextField import looks like this:

import { useTsController } from "@ts-react/form"

export function TextField() {
  const { field, error } = useTsController<string>()
  return (
    <>
      <input
        value={field.value}
        onChange={(e) => {
          field.onChange(e.target.value)
        }}
      />
      {error?.errorMessage && <span>{error?.errorMessage}</span>}
    </>
  )
}

[iway1]

what framework are you using for the app? nextjs? vite?

[iway1]

should be good now let me know if you have any other issues