How to render a tab with usePageSimple style

I am using Fuse for my react application. I have one component with some multiple tab and, inside one of this tab, I want to rendere something similar to the Tasks module available on the Fuse React Material (https://react-material.fusetheme.com/apps/tasks/0fcece82-1691-4b98-a9b9-b63218f9deef). (I do not have a deep knowledge of JS and React).

To do that, I have defined this:

const Root = styled(FusePageSimple)(({ theme }) => ({
    '& .FusePageSimple-header': {
        backgroundColor: theme.palette.background.paper
    }
}));

/**
 * The variant tab.
 * @author giraand
 */
function VariantTab(props: VariantTabProps) {
    const { product } = props;
    const routeParams = useParams();
    const [rightSidebarOpen, setRightSidebarOpen] = useState(false);
    const isMobile = useThemeMediaQuery((theme) => theme.breakpoints.down('lg'));

    useEffect(() => {
        setRightSidebarOpen(Boolean(routeParams.id));
    }, [routeParams]);
    
    /* <VariantApp variants={product !== undefined ? product.variants : null} /> */
    /* <VariantsTable variantRows={product !== undefined ? product.variants : null} /> */
    return (
        <Root
            header={<VariantHeader variants={product !== undefined ? product.variants : null} />}
            content={<VariantList variants={product !== undefined ? product.variants : null} />}
            rightSidebarContent={<VariantSidebarContent />}
            rightSidebarOpen={rightSidebarOpen}
            rightSidebarOnClose={() => setRightSidebarOpen(false)}
            rightSidebarWidth={640}
            scroll={isMobile ? 'normal' : 'content'}
        />
    );
}

All the elements are correct and filled with data, but, on the page there I cannot see anything. Do you have any idea? I do not see any error on the console.

If I render the elements without Root with the FusePageSimple I can see the data.