How to import dynamic component loop with react/next

Question

How i can use dynamic import react components in loop with NextJS:

import dynamic from 'next/dynamic';

function AlbumListPage({ albums }) {
  return (
    <ul>
      {albums ? albums.result.COMPONENT.map(album =>
        
        dynamic(() => import(`../${album.component_url}`).then((mod) => mod), { ssr: true })
      ) : null}
    </ul>
  )
}

export async function getServerSideProps() {
  const response = await fetch(`myapi`)
  const albums = await response.json();

  return { props: { albums } }

}

export default AlbumListPage;
}

I am getting compile error:

Failed to compile

./README.md
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
| 
| ## Getting Started