Teleport is showing Extraneous non-props attributes (for shared props)

[sentiasa]

I am trying to use teleport feature of vue 3 (by using options api) and having the target div in my body (outside vue/inertiajs)

Index.vue

<template>
    <my-modal><my-modal>
</template>

MyModal.vue

<template>
    <teleport to="#modals">
         // the modal body html
    </teleport>
</template>

This is throwing me

Extraneous non-props attributes (errors, isAdmin, businesses, currentBusiness) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

where my shared inertia props are "errors, isAdmin, businesses, currentBusiness"

---

If I try to move <teleport> in my Index.vue and add v-bind="$attrs to teleport element, it doesn't show this error.

Index.vue

<template>
    <teleport to="#modals" v-bind="$attrs">
        <my-modal><my-modal>
    </teleport>
</template>

Can anyone please guide me on what I am doing wrong?

[sentiasa]

Found the issue. I didn't wrap all elements it in a parent div in my Index.vue component. 🤦‍♂️