How to iterate through a directory of images using React

Here's my situation:

I have a directory of folders that contain image files inside them. For example: images/(ID)/(ID)-1 (or 2, 3, etc.).jpg. Where (ID) is variable (I have hundreds of IDs within the images directory).

I'm new to React and still trying to get my way through how to use loops in it. I've tried several different approaches and none have seemed to worked on this specific case.

How would I go about constructing a loop that will iterate over each folder, dynamically, and render the images inside each folder? I have a carousel that I want to call this loop in.

Thank you for any help.

EDIT: I've tried working with these two solutions:

How to iterate images on React?

With my own context:

const images = [{ src: "./images" + ID, alt: "Your description here 1" }];

// ...

{
  images.map(function(imageProps) {
    return (
      <li key={imageProps.src}>
        <img src={imageProps.src} alt={imageProps.alt} />
      </li>
    );
  });
}

And

Dynamically import images from a directory using webpack

With my own context:

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(
  require.context("./images" + ID, false, /\.(png|jpe?g|svg)$/)
);

With the latter, I figured out that within require.context, you can't have a dynamic variable within the argument otherwise it just throws you an error. The first example, it told me that .map wasn't a function. The error wasn't much help.