requires dependency not working

form.vue

<script setup lang="ts">
import { z } from 'zod';
import { DependencyType} from '@/components/ui/auto-form/interface';

const compressorType = z.enum(["Axial", "Centrifugal", "Reciprocating", "Screw"], {
  message: "Invalid compressor type",
});
const compressorSealType = z.enum(["RPV", "DSV", "WSV"], {
  message: "Invalid compressor seal type",
});

const dependencies = ref([
  {
    sourceField: "type",
    type: DependencyType.REQUIRES,
    targetField: "subType",
    when: (type: string) => type === "Reciprocating",
  },
]);

const schema = z.object({
  type: compressorType,
  subType: compressorSealType.optional(),
})
const fieldConfig = ref({
  type: {
    label: "Compressor Type",
    inputProps: {
      placeholder: 'Choose one...',
    }
  },
  subType: {
    label: "Compressor Sub Type",
    inputProps: {
      placeholder: 'Choose one...',
    }
  },
})
const initialValues = ref({
  type: "Centrifugal",
  subType: undefined,
})
</script>
<template>
  <div class="flex flex-col">
    <AutoForm class="w-2/3 space-y-6" :dependencies :field-config :initial-values :schema v-slot="{ shapes }">
      {{ shapes.subType.required }}
    </AutoForm>
  </div>
</template>