React / Make a photo grid with color square under each photograph

Hello

I am trying to implement a photogrid from a json file. Displaying the photographs is ok, but I can't figure how to display the relative color boxes under each photograph

Here is an extract of my json file :

 "images": [
        {
            "name": "1020.jpg",
            "palette": [
                "#b43f45",
                "#1c2c6c",
                "#e5c8c0",
            ],
            "tags": [0,3],
            "prompt": "retro 1980 computer tech character"
        },

In this case the idea is puting under thr photograph three boxes with the mentioned color.

Here is my code working :

import myjson from "./refs.json";
import PickColor from "./PickColor";

function App() {
  const images = myjson.images;

  return (
    <div>
      <div className="gallery">
        {images.map((index, i) => {
          return <img src={`./images/${index.name}`} key={i} alt="" />;         
        })}
      </div>
    </div>
  );
}

I have trouble looping for the color palette (should it be nested inside the first callback ) and passing the right color information to a div

EDIT 01

I have tried this solution. Compiling is ok but no result.

  <div className="gallery">
        {images.map((index, i) => {
          return (
            <div>
              <img src={`./images/${index.name}`} key={i} alt="" />

              {index.palette.map((index, i) => {
                return (<div className="colorBox" style={{backgroundColor:`"${index[i]}"`}} />);
              })}
            </div>
          );
        })}
      </div>

I guess the problem is inside the style attribute (by the way I have learned I needed double curly brackets for that) where I tried to access these color information.

"images": [
    {
        "name": "1020.jpg",
        "palette": [
            "#b43f45",
            "#1c2c6c",
            "#e5c8c0",