¿Cómo puedo renderizar imágenes en un bucle en React?

Estoy intentando crear una tarjeta con un título, una descripción y una imagen.

Mi estructura de archivos se ve así:

src
 -components
 -images
 -section
   -Featured.js

En un archivo config.js tengo:

module.exports = {

  featuredSection: [
    {
      name: 'beer-image-1',
      title: 'Mango Cart',
      description:
        'A light Wheat Ale bursting with lots of 
         fresh mango flavor and aroma, finishing 
         crisp and refreshing.',
    },
  ],
};

En mi Featured.jsarchivo de componentes he intentado:

const Featured = () => {
...

// Get array of all names in config file
const featuredNames = featuredSection.map((beer) => beer.name); // --> ['beer-image-1']

// Return an image for each name in `featuredNames` array
const images = featuredNames.map((image) => {
  return (
    <img
      key={image}
      src={require(`../images/${image}.jpg`)}
      alt='Beer picture'
    />
  );
});


  // Return title, desc., and image
  const card = featuredSection.map((image, i) => {
    return (
      <div key={i}>
        <h1>{image.title}</h1>
        <p>{image.description}</p>
        {images}
      </div>
    );
  });

  return <>{card && card}</>;
}

Esto devuelve el título y la descripción, pero la imagen no se carga y solo muestra el texto alternativo.

He intentado hacer uso de estos ejemplos, pero siempre aparece el texto alternativo.