I'm making a library in VueJS 3 using Composition API. I implemented Provide/Inject as mentioned in docs. But the property in child component is still undefined and I get following error in browser console:

A very simple implementation of my code is as follow:

Usage In Project

<ThemeProvider>

    <Button color="green">

        ABC

    </Button>

</ThemeProvider>



<script>

    import { ThemeProvider, Button } from 'my-library'



    export default {

        name: 'SomePage',

        setup() {...},

    }

</script>

ThemeProvider.js (Parent Componen)

import { toRefs, reactive, provide, h } from 'vue'



export default {

    name: 'theme-provider',

    props:

        theme: {

            type: Object,

            default: () => ({...}),

        },

    },

    setup(props, { slots }) {

        const { theme } = toRefs(props)



        provide('theme', reactive(theme.value))



        return () =>

            h(

                'div',

                {...},

                slots.default()

            )

    },

}

Button.js (Child Component)

import { inject, h } from 'vue'



export default {

    name: 'Button',

    setup(props, { slots }) {

        const theme = inject('theme')

        console.log(theme)  // returns undefined



        return () =>

            h(

                'button',

                {...},

                slots.default()

            )

    },

}