Untitled

 const [opened, setOpened] = useState(true);
  const inventoryItems = useBearStore((state) => state.inventoryItems);
  const inventoryItemSchema = z.object({
    itemSelect1: z.string().min(1, "item is required"),
    itemSelect2: z.string().min(1, "item is required"),
    itemQuantity1: z.string().min(1, "Fill the quantity"),
    itemQuantity2: z.string().min(1, "fill the quantity"),
  });
  
  const {
    register,
    handleSubmit,
    watch,
    control,
    getValues,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(inventoryItemSchema),
  });
  const onSubmit = (data) => {
    console.log("data", data);
    props.setPopUp(false);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Modal opened={props.popUp} onClose={() => props.setPopUp(false)}>
        <Controller
          render={({ field }) => {
            return (
              <NativeSelect
                onChange={field.onChange}
                inputRef={field.ref}
                defaultValue="true"
                label="Quantity"
                placeholder="Pick one"
                data={inventoryItems.map((item) => item.item_name)}
              />
            );
          }}
          name="itemSelect1"
          control={control}
        />
        {errors.itemSelect1?.message}

        <Controller
          render={({ field }) => {
            return (
              <NativeSelect
                mb={24}
                onChange={field.onChange}
                inputRef={field.ref}
                defaultValue="true"
                label="Quantity"
                placeholder="Pick one"
                data={inventoryItems.map((item) => item.item_name)}
              />
            );
          }}
          name="itemSelect2"
          control={control}
        />
        {errors.itemSelect2?.message}
        <Controller
          render={({ field }) => {
            return (
              <TextInput
                placeholder="Item quantity"
                name={field.name}
                mb={12}
                value={field.value}
                onChange={field.onChange}
                inputRef={field.ref}
              />
            );
          }}
          name="itemQuantity1"
          control={control}
        />
        {errors.itemQuantity1?.message}
        <Controller
          render={({ field }) => {
            return (
              <TextInput
                placeholder="Item quantity"
                name={field.name}
                value={field.value}
                onChange={field.onChange}
                inputRef={field.ref}
              />
            );
          }}
          name="itemQuantity2"
          control={control}
        />
        {errors.itemQuantity1 && <p>{errors.itemQuantity1.message}</p>}