MUI Tab- componnent property to Tab render but throw an exeption

sorry if my question isnt' clear this is my first question.

I read the many decomentation and github issue, but i dont' find any answer to my question

the code is working but I have an exeption in the console the exeption is about component props I give to <Tab/>

Material-UI: The component prop provided to ButtonBase is invalid. Please make sure the children prop is rendered in this custom component

I have this component

import React, { useState } from 'react'
import MenuCategory from './MenuCategory'
import Tabs from 'ui/components/Tabs';
import Tab from 'ui/components/Tab';

const categoriesBar = ({ categories, addSubCategory, style }) => {

  const [currentCategoryIndex, setCurrentCategoryIndex] = useState(0)
  const a11yProps = index => ({
    id: `scrollable-auto-tab-${index}`,
    'aria-controls': `scrollable-auto-tabpanel-${index}`,
  })


  const setCurrentCategoryHandler = index => setCurrentCategoryIndex(index)

  const _createRenderTabBar = (category, i) => React.forwardRef((_, ref) => (
    <MenuCategory
      ref={ref}
      active={currentCategoryIndex === i}
      category={category}
      index={i}
      style={style}
      addSubCategory={addSubCategory}
      setCurrentCategory={setCurrentCategoryHandler}
    />
  ))

  return (
    <Tabs value={currentCategoryIndex > categories.length - 1 ? 0 : currentCategoryIndex} className={style.tabsContainer} variant="scrollable"
      scrollButtons="auto"
      aria-label="scrollable auto tabs example">
      {
        categories.map((category, i) => (
          <Tab
            key={`${i}-${category.Level}`}
            value={i}
            component={_createRenderTabBar(category, i)}
            {...a11yProps(i)}
          />
        ))
      }
    </Tabs>
  )
}

export default React.memo(categoriesBar)

MenuCategory.js

import React from 'react'

const menuCategory = ({ category, style, index, addSubCategory, setCurrentCategory = 'preset', active = false }, ref ) => {
    const { Level, ImageName, Hierarchy, Description, items, ShouldDisplayPicture } = category

    const categoryClicked = () => {
        addSubCategory(Hierarchy, items, Level)
        setCurrentCategory(index)
    }

    return (
        <button onClick={categoryClicked} ref={ref} className={`${style.menuCategory} ${active ? style.active : ''}`}>
            {
                ShouldDisplayPicture &&
                <div className={style.categoryImg} style={{
                    backgroundImage: `url('${ImageName.resourceUrl()}')`
                }}></div>
            }
            <span >
                {Description}
            </span>
        </button>

    )
}

export default React.forwardRef(menuCategory)