Estoy tratando de hacer un juego de memoria usando reactjs. Tengo mis componentes y otros archivos en la carpeta src. index.html,style.css y la carpeta de imágenes (img, con todas las carpetas de imágenes img están dentro de la carpeta pública para mostrar en la cuadrícula) en la carpeta pública. Todas las imágenes en la carpeta img son pngs.

Tengo que mostrar estas imágenes en la cuadrícula, así que hice un componente de tarjeta para el componente de tarjeta de imágenes individuales y un componente de tarjetas para el contenedor. La función usestate y arraymap se usa para mostrar estas imágenes.

Cuando probé por primera vez con solo una cadena 'tarjeta' en lugar de traer todas las imágenes a la carpeta, funcionó bastante bien y mostró 'tarjeta' en todas las cuadrículas. Luego importé la carpeta de imágenes y todavía muestra las cuadrículas y sus propiedades CSS, pero las imágenes no se cargan en la pantalla. Cambié la cantidad de imágenes y con respecto a eso, la cantidad de cuadrículas está cambiando, pero las imágenes no se muestran.

container es una clase en el componente de tarjetas y una clase de tarjeta para card.js. No tengo idea de lo que me estoy perdiendo en estos códigos.