Too many div generation from using ReactWrapper

After #18 failed with the VuePlugin I tried to do the same with the alternative ReactWrapper and though the following code works,

<template>
  <div class="hello">
    <react :component="grid">
      <react :component="gridcol">2</react>
      <react :component="gridcol">2</react>
    </react>
  </div>
</template>

<script>
import ScrollIndicator from '@/components/ScrollIndicator.vue'
import { ReactWrapper } from 'vuera'
import { Grid, GridCol } from 'griz'

export default {
  name: 'home',
  data() {
    return {
      msg: 'Test data',
      grid: Grid,
      gridcol: GridCol,
    }
  },
  components: { ScrollIndicator, react: ReactWrapper }
}
</script>

In a React application grid will be a flex container and grid-col its flex items. The problem here is each of them are rendered with extra divs inside of them which breaks the flex layout.

I get:

gridComponentWrapper
   |--grid
           |-- div
                  |-- gridcolComponentWrapper
                           |-- gridcol
                                  |-- div
                                         |-- 2
                  |-- gridcolComponentWrapper
                           |-- gridcol
                                  |-- div
                                         |-- 2

where I expected

grid
  |-- gridcol
          |-- 2
  |-- gridcol
          |-- 2