Vuejs inject to functional component from parent provider component

Question

I'am trying to inject to an functional component in vue from an parent "ThemeProvider" component, but the functional component dont't get the provided theme object.

It only works if the provider is inside the View.vue file... Is there a way to do "parent provide" > "child inject" or is "ancestor provide" > "child inject" the only way?

ThemeProvider.vue

export default {
  name: 'ThemeProvider',

  provide: {
    theme: {
      dark: '#222'
    }
  },

  render (h) {
    return h('div', this.$slots.default)
  }
}

FunctionComponent.vue

 export default {
    functional: true,

    inject: {
      theme: {
        default: () => ({})
      }
    },

    render: (h, { injections, children }) => {
      console.log(injections.theme.dark) // dont exist
      return h('div', children)
    }
  }

View.vue

<template>
 <ThemeProvider>
  <FunctionalComponent />
 </ThemeProvider>
</template>