[Problema] no me funciona el Image Filter

Intento hacer lo que hace el instructor pero me aparece el siguiente error: "Uncaught SyntaxError: Unexpected token '<' (at ImageFilter.js?t=1681737395185:12:18)"

Los códigos

import PropTypes from 'prop-types'
import styled from 'styled-components'
import ImageFilter from '../../ImageFilter'

const Card = styled.div`
  box-shadow: 4px 4px 20px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin: 2px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  font-size: 12px;
`

const Info = styled.div`
  display: flex;
  flex-direction: column;
  .type {
    font-weight: bold;
  }
`

function CardComponent({ cargo }) {
  const { type, value, from, date } = cargo
  return (
    <Card>
      {ImageFilter(type)}
      <Info>
        <span className='type'> {type} </span>
        <span> {from} </span>
        <span> {value} </span>
      </Info>
      <span> {date} </span>
    </Card>
  )
}

CardComponent.propTypes = {
  cargo: PropTypes.object.isRequired,
}

export default CardComponent

import { Icon } from './components/UI'
import alimentacion from './assets/images/alimentacion.svg'
import otros from './assets/images/otros.svg'
import salud from './assets/images/salud.svg'
import transporte from './assets/images/transporte.svg'
import utilidades from './assets/images/utilidades.svg'

export default (type) => {

  const Images = {
    Restaurante: <Icon src={alimentacion} alt="Restaurante" />,
    Salud: <Icon src={salud} alt="Salud" />,
    Transporte: <Icon src={transporte} alt="Transporte" />,
    Utilidades: <Icon src={utilidades} alt="Utilidades" />,
    default: <Icon src={otros} alt="Otros" />,
  }

  return Images[type] || Images.default;
}