не получается размапить компаненты, в данном случае svg

import React from 'react'
import { v4 as uuidv4 } from 'uuid'
import './NavBar.scss'
import { ReactComponent as FAQ } from '../../../../assets/icons/action/help_24px.svg'
import { ReactComponent as About } from '../../../../assets/icons/alert/error_24px.svg'
import { ReactComponent as Projects } from '../../../../assets/icons/av/branding_watermark_24px.svg'
import { ReactComponent as AccessMatrix } from '../../../../assets/icons/communication/dialpad_24px.svg'
import { ReactComponent as Customers } from '../../../../assets/icons/content/how_to_reg_24px.svg'
import { ReactComponent as Imprint } from '../../../../assets/icons/editor/insert_drive_file_24px.svg'
import { ReactComponent as Archive } from '../../../../assets/icons/editor/insert_drive_file_24px-1.svg'
import { ReactComponent as Admins } from '../../../../assets/icons/social/person_24px.svg'

const items = [
  {
    id: uuidv4(),
    component: 'Projects',
    text: 'Projects'
  },
  {
    id: uuidv4(),
    component: Archive,
    text: 'Archive'
  },
  {
    id: uuidv4(),
    component: AccessMatrix,
    text: 'Access Matrix'
  },
  {
    id: uuidv4(),
    component: Customers,
    text: 'Customers'
  },
  {
    id: uuidv4(),
    component: Admins,
    text: 'Admins'
  },
  {
    id: uuidv4(),
    component: FAQ,
    text: 'FAQ'
  },
  {
    id: uuidv4(),
    component: About,
    text: 'About'
  },
  {
    id: uuidv4(),
    component: Imprint,
    text: 'Imprint'
  }
]
const NavBar = (props) => (
  <nav className='navbar'>
    <div className='navbar-logo'>
      <h4 className='nav-bar-logo_position'>LOGO COMPANY</h4>
    </div>
    <div className='navbar'>
      {items.map(item =>
        <div className='navbar__item-container' key={item.id}>
          <div className='navbar__item-wrapper'>
            {item.component}
            <div className='navbar__item'>&nbsp;{item.text}</div>
          </div>
        </div>
      )}
    </div>
  </nav>
)

export default NavBar

import React from 'react'
import './NavBar.scss'
import { ReactComponent as FAQ } from '../../../../assets/icons/action/help_24px.svg'
import { ReactComponent as About } from '../../../../assets/icons/alert/error_24px.svg'
import { ReactComponent as Projects } from '../../../../assets/icons/av/branding_watermark_24px.svg'
import { ReactComponent as AccessMatrix } from '../../../../assets/icons/communication/dialpad_24px.svg'
import { ReactComponent as Customers } from '../../../../assets/icons/content/how_to_reg_24px.svg'
import { ReactComponent as Imprint } from '../../../../assets/icons/editor/insert_drive_file_24px.svg'
import { ReactComponent as Archive } from '../../../../assets/icons/editor/insert_drive_file_24px-1.svg'
import { ReactComponent as Admins } from '../../../../assets/icons/social/person_24px.svg'

const NavBar = (props) => (
  <nav className='navbar'>
    <div className='navbar-logo'>
      <h4 className='nav-bar-logo_position'>LOGO COMPANY</h4>
    </div>
    <div className='navbar'>
      <div className='navbar__item-container'>
        <div className='navbar__item-wrapper'>
          <Projects />
          <div className='navbar__item'>&nbsp;Projects</div>
        </div>
      </div>
      <div className='navbar__item-container'>
        <div className='navbar__item-wrapper'>
          <Archive />
          <div className='navbar__item'>&nbsp;Archive</div>
        </div>
      </div>
      <div className='navbar__item-container'>
        <div className='navbar__item-wrapper'>
          <AccessMatrix />
          <div className='navbar__item'>&nbsp;Access matrix</div>
        </div>
      </div>
      <div className='navbar__item-container'>
        <div className='navbar__item-wrapper'>
          <Customers />
          <div className='navbar__item'>&nbsp;Customers</div>
        </div>
      </div>
      <div className='navbar__item-container'>
        <div className='navbar__item-wrapper'>
          <Admins />
          <div className='navbar__item'>&nbsp;Admins</div>
        </div>
      </div>
      <div className='navbar__item-container'>
        <div className='navbar__item-wrapper'>
          <FAQ />
          <div className='navbar__item'>&nbsp;FAQ</div>
        </div>
      </div>
      <div className='navbar__item-container'>
        <div className='navbar__item-wrapper'>
          <About />
          <div className='navbar__item'>&nbsp;About</div>
        </div>
      </div>
      <div className='navbar__item-container'>
        <div className='navbar__item-wrapper'>
          <Imprint />
          <div className='navbar__item'>&nbsp;Imprint</div>
        </div>
      </div>
    </div>
  </nav>
)

export default NavBar