Error with styled component import and eslint

i got an error using styled component and eslint,

i want to use styled component in a separete files and i got an error

styledHeader' is defined but never used.

this is the whole component

import { styledHeader } from "./header.styled";

/**
 * return a JSX Element Header
 * @return {JSX.Element} <Header/>
 */
function Header() {
  return <styledHeader>
  </styledHeader>;
}

export default Header;

Answer

React component names must start with a capital letter.

It isn’t used because you haven’t used it as a valid component.

import { styledHeader as StyledHeader } from "./header.styled";

function Header() {
    return <StyledHeader></StyledHeader>;
}