Styled component separate file

styled.js

const Container = styled.header`
   position: fixed;
   top: 0;

   height: 10%;
   width: 100%;

   display: grid;
   grid-template-areas: 'social . nav .';
   grid-template-columns: 15% 1fr 1fr 15%;
   grid-template-rows: 1fr;

   background: ${(props) => props.theme.colors?.home};
   box-shadow: ${(props) => props.theme.options.shadow?.bottom};
`;

const SocialMedia = styled.nav`
   grid-area: social;

   display: grid;
   grid-auto-flow: column;
   gap: 2rem;
   overflow: hidden;

   place-self: center;
`;

const Navigation = styled(motion.nav)`
   grid-area: nav;

   display: grid;
   grid-auto-flow: column;
   gap: 5rem;
   overflow: hidden;

   place-self: center;
`;

const Links = styled(NavLink)`
   transition: color 0.5s ease-in-out;
   color: ${(props) => props.theme.colors?.white};

   &:hover {
      color: ${(props) => props.theme.colors?.black};
   }

   &.active:hover,
   &.active {
      color: ${(props) => props.theme.colors?.home};
      text-shadow: ${(props) => props.theme.options.shadow?.text};
   }
`;

const MotionTitle = styled(motion.h1)`
   padding: 1.2rem;
   text-transform: uppercase;

   font-family: ${({ theme }) => theme.fonts?.family.principal};
   font-size: clamp(0.5vmin, 2.5vmin, 5vmin);
`;

export const SHeader = {
   Container,
   SocialMedia,
   Navigation,
   Links,
   MotionTitle,
};

/**======================= Usage =================*/
import { SHeader } from './Header.styled';

const Header = () => {
   return (
      <SHeader.Container>
         <SHeader.SocialMedia>
            {socialMedia.map((media) => (
               <a key={media.name} href={media.href}>
                  <Icon
                     name={media.name}
                     colorIcon="white"
                     hoverIcon="black"
                     sizeIcon="1.2vw"
                  />
               </a>
            ))}
         </SHeader.SocialMedia>

         <SHeader.Navigation
            variants={variantsNav}
            initial="initial"
            animate="animate"
         >
            {navLinks.map((linksProfile) => (
               <SHeader.Links to={linksProfile.to} key={linksProfile.name}>
                  <SHeader.MotionTitle variants={variantsTitleNav}>
                     {linksProfile.name}
                  </SHeader.MotionTitle>
               </SHeader.Links>
            ))}
         </SHeader.Navigation>
      </SHeader.Container>
   );
};