How to use the @emotion/styled.path function in @emotion/styled

namespace S {
	export const Keyframes = keyframes`
		from {
			stroke-dashoffset: 24;
		}
		to {
			stroke-dashoffset: 0;
		}
	`;

	const selected = css`
		stroke-dasharray: 10, 2;
		animation: ${Keyframes} 1s linear infinite;
	`;

	export const Path = styled.path<{ selected: boolean }>`
		${p => p.selected && selected};
		fill: none;
		pointer-events: all;
	`;
}

export class DefaultLinkFactory extends AbstractReactFactory<
	Link,
	DiagramEngine
> {
	constructor(type = 'default') {
		super(type);
	}

	generateReactWidget(event): JSX.Element {
		return ;

import React from 'react';
import styled from '@emotion/styled';

const HelpPath = styled.path`
  fill: ${props => (props.active ? props.theme.colors.quaternary : props.theme.colors.tertiary)};

  &:hover {
    fill: ${props => props.theme.colors.quaternary};
  }
`;

function HelpIcon(props) {
  return (
    <svg viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 0h24v24H0V0z" fill="none"></path></svg>

import React from 'react';
import styled from '@emotion/styled';

const AddPath = styled.path`
  fill: ${props => (props.active ? props.theme.colors.quaternary : props.theme.colors.tertiary)};

  &:hover {
    fill: ${props => props.theme.colors.quaternary};
  }
`;

function AddIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="38px" viewBox="-16 0 512 512" height="38px"></svg>

import React from 'react';
import styled from '@emotion/styled';
import ProxyButton from './ProxyButton';
import PropTypes from 'prop-types';

//STYLE start

const BackArrow = styled.path`
  fill: ${props => props.theme.primary};
`;

//STYLE end

export default function BackButton({ onClick }) {
  return (
    
      <svg viewBox="0 0 8.537 18.165" height="18.165" width="8.537" xmlns="http://www.w3.org/2000/svg">
        </svg>

import React from 'react';
import styled from '@emotion/styled';

const Path = styled.path`
  fill: ${props => props.theme.secondary};
`;

export default function DefaultUserAvatar2() {
  return (
    <svg viewBox="0 0 32 32" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
      <path d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0Zm6,8a2,2,0,1,1-2,2A2,2,0,0,1,22,8ZM10,8a2,2,0,1,1-2,2A2,2,0,0,1,10,8Zm6,18a9.994,9.994,0,0,1-8.576-4.855L10,19.6A7,7,0,0,0,22,19.6l2.573,1.544A10,10,0,0,1,16,26Z"></path>
    </svg>
  );
}

import React from 'react';
import styled from '@emotion/styled';

const SVG = styled.svg`
  fill: ${props => props.theme.colors.tertiary};

  &:hover {
    fill: ${props => props.theme.colors.quartenary};
  }

  &:active {
    fill: ${props => props.theme.colors.secondary};
  }
`;

const BirdPath = styled.path``;

function BirdIcon(props) {
  return (
    <svg viewBox="0 0 469.333 469.333" height="32px" width="32px" xmlns="http://www.w3.org/2000/svg">
      </svg>

import React from 'react';
import styled from '@emotion/styled';

const BookPath = styled.path`
  fill: ${props => (props.active ? props.theme.colors.quaternary : props.theme.colors.tertiary)};

  &:hover {
    fill: ${props => props.theme.colors.quaternary};
  }
`;

function BookIcon(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="38px" viewBox="0 0 510 510" height="38px">
</svg>

import React from 'react';
import styled from '@emotion/styled';

const Path = styled.path`
  fill: ${props => props.theme.secondary};
`;

export default function DefaultUserAvatar1() {
  return (
    <svg viewBox="0 0 32 32" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
      <path d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0ZM10,14c-1.1,0-2-1.343-2-3s.9-3,2-3,2,1.343,2,3S11.1,14,10,14Zm6,12a4,4,0,1,1,4-4A4,4,0,0,1,16,26Zm6-12c-1.1,0-2-1.343-2-3s.9-3,2-3,2,1.343,2,3S23.1,14,22,14Z"></path>
    </svg>
  );
}

import React from 'react';
import styled from '@emotion/styled';

const CoverTreeIcon = styled.path``;

const SVG = styled.svg`
  fill: ${props => props.theme.colors.primary};

  &:hover {
    fill: ${props => props.theme.colors.quartenary};
  }

  &:active {
    fill: ${props => props.theme.colors.secondary};
  }
`;

function TreeIcon(props) {
  return (
    <>

import React from 'react';
import styled from '@emotion/styled';

const Path = styled.path`
  fill: ${props => props.theme.secondary};
`;

export default function DefaultUserAvatar0() {
  return (
    <svg viewBox="0 0 32 32" height="32" width="32" xmlns="http://www.w3.org/2000/svg">
      <path d="M16,0A16,16,0,1,0,32,16,16,16,0,0,0,16,0ZM9.707,10.332A1,1,0,0,1,8.293,8.918a4.032,4.032,0,0,1,5.414,0,1,1,0,1,1-1.414,1.414,2.072,2.072,0,0,0-2.586,0ZM16,26c-2.209,0-4-2.239-4-5s1.791-5,4-5,4,2.239,4,5S18.209,26,16,26Zm7.707-15.668a1,1,0,0,1-1.414,0,2.072,2.072,0,0,0-2.586,0,1,1,0,0,1-1.414-1.414,4.032,4.032,0,0,1,5.414,0,1,1,0,0,1,0,1.414Z"></path>
    </svg>
  );
}