Fetch images and Display Flex

.App {
  font-family: sans-serif;
  text-align: center;
}

.image-container {
  display: flex;
}

.image-box {
  width: 30px;
  height: 30px;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
}

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

import React, { useState } from "react";
import { useEffect } from "react";
import "./styles.css";

const App = () => {
  const URL = `https://jsonplaceholder.typicode.com/photos`;
  const [imageList, setImageList] = useState([]);
  useEffect(() => {
    fetch(URL)
      .then((res) => {
        // console.log(res);
        return res.json();
      })
      .then((data) => {
        console.log(data);
        setImageList(data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  return (
    <div className="image-container">
      {imageList.map((image) => {
        return (
          <div key={image.id}>
            {/* <div>{image.title}</div> */}
            <img className="image-box" src={image.url}></img>
          </div>
        );
      })}
    </div>
  );
};

export default App;