Why I cant use and styled custom components inside SideNav component ?

[CarlosDanielDev]

I want to style some component like NavText isolated(just it) using styled-components, but how can I do it ? I tryed to do something Like this:

// styles.js
import styled from "styled-components";
import { NavText } from "@trendmicro/react-sidenav";

export const Text = styled(NavText)`
  text-transform: capitalize;
`;

// index.js
import React from "react";
import { FaSignOutAlt, FaEdit } from "react-icons/fa";

import SideNav, {
  Toggle,
  Nav,
  NavItem,
  NavIcon,
  NavText
} from "@trendmicro/react-sidenav";

import "@trendmicro/react-sidenav/dist/react-sidenav.css";
import { Text } from "./styles"; // import my custom component

export default function SideBar() {
  return (
    <SideNav>
      <NavItem></NavItem>
      <Toggle onClick={() => console.log("aaaa")} />
      <Nav>
        <NavItem eventKey="cadastro">
          <NavIcon>
            <FaEdit />
          </NavIcon>
          <Text>Cadastro</Text> {/*  look me */}
          <NavItem eventKey="cadastro/produtores">
            <NavText>Produtores</NavText>
          </NavItem>
          <NavItem eventKey="charts/propriedades">
            <NavText>Propriedades</NavText>
          </NavItem>
        </NavItem>
        <NavItem eventKey="signOut">
          <NavIcon>
            <FaSignOutAlt />
          </NavIcon>
          <NavText>Sair</NavText>
        </NavItem>
      </Nav>
    </SideNav>
  );
}

And show me this error.

How can style isolated components ?

[fgs-dbudwin]

Try wrapping your SideNav component in <React.Fragment> ... </React.Fragment> or a <div> ... </div>.

[CarlosDanielDev]

I tryed, and gives me the same error..