Using FocusTrap as a dynamic component

[ragulka]

I'm trying to conditionally toggle focus trapping in a component. Unfortunately, it looks like FocusTrap does not expose any props to activate/deactivate focus trapping, so I was hoping I could use the FocusTrap as a dynamic element like this - using SFC & script setup syntax:

<template>
    <Component :is="componentType">
        Test <input type="text" />
    </Component>
</template>

<script setup>
import { defineProps, computed } from 'vue'
import { FocusTrap } from '@headlessui/vue'

const props = defineProps({
    trapFocus: {
        type: Boolean,
        default: false,
    },
})

const componentType = computed(() => props.trapFocus ? 'FocusTrap' : 'div')
</script>

However, that does not seem to work: while the input and the wrapper is rendered, no focus trapping occurs.

I'm not terribly proficient in Vue, so if anybody can point out why this does not work, I'd greatly appreciate it.