Tailwind problem backgroundImage not loading

I have a problem with tailwind. I'm working with React and i wanted to chnage the image with a map and the id so i did a .json file:

[
  {
    "id": "1",
    "title": "...",
    "description": "...",
    "link": "/work"
  },
  {
    "id": "2",
    "title": "...",
    "description": "...",
    "link": "/work"
  },

after that i map it in my file like this

{card.map((card) => (
<Link
          to="/work"
          key="1"
          className={`relative w-[576px] h-[320px] bg-cover rounded-xl overflow-hidden bg-COVER${card.id}  group transition-all ease-in duration-300`}
>
        ...
</Link>
))}

as you can see there is COVER${card.id} and in the tailwind.config.js file i did this

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    fontFamily: {
      proggy: ["Proggy", "monospace"],
    },
    extend: {},
    backgroundImage: {
      COVER1: "url('./assets/test1.jpg')",
      COVER2: "url('./assets/test2.jpg')",
      COVER3: "url('./assets/test3.jpg')",
      COVER4: "url('./assets/test4.jpg')",
      COVER5: "url('./assets/test5.jpg')",
      COVER6: "url('./assets/test6.jpg')",
    },
  },
  plugins: [],
};

This is not working properly

I tried to do this

{card.map((card) => (
<Link
          to="/work"
          key="1"
          className={`relative w-[576px] h-[320px] bg-cover rounded-xl overflow-hidden bg-COVER1  group transition-all ease-in duration-300`}
>
        ...
</Link>
))}

and it is working, after i undo this and make it like this

{card.map((card) => (
<Link
          to="/work"
          key="1"
          className={`relative w-[576px] h-[320px] bg-cover rounded-xl overflow-hidden bg-COVER${card.id}  group transition-all ease-in duration-300`}
>
        ...
</Link>
))}

the first image is now working I think the problem is from the loading of the image but don't understand how to fix it if you need more file i can.