I have just installed Typescript and am trying to deploy it to an existing project. I am trying to dynamically assign a "name" attribute to a div component (Header.Arrow) created with styled components, unfortunately this is not possible due to an errors that occurs:

Type '{ role: "button"; name: string; "aria-label": string; }' is not assignable to type 'IntrinsicAttributes......

Property 'name' does not exist on type 'IntrinsicAttributes & .......

import { Container, Arrow, Frame, Logo } from './styles/header';

const Header = ({ children, ...restProps }: {children: React.ReactNode}): JSX.Element => {
  return <Container {...restProps}>{children}</Container>;
};

Header.Arrow = function HeaderArrow({ action, ...restProps }: {action: string}) : JSX.Element {
  return (
    <Arrow
      role="button"
      name={action === 'previous' ? 'previous' : 'next'}
      aria-label={action === 'previous' ? 'previous' : 'next'}
      {...restProps}
    />
  );
}; 

What could be the cause? "aria-label" and "role" attributes does not cause the errors