How can I set a different backgroundImage in element in a .map() function?

Question

I want to give each CategoryCard div a different background-image.

How can I solve this problems with styled components? I use React and Typescript.

{this.MainChannels.map(item => {
  return (
    <CategoryCard key={item._id} onClick={() => this.handleChannel(item.name)}>
      {item.name}
    </CategoryCard>)
})}

the URL's of the images are locally it means my pictures are stored on my computer

Answer 1

I solved it with importing of each image and inline styling of the CategoryCard.

then i pushed the imports in an array. And every item in the .map() function gets the own background through the array.