How to cache digitaloceanspaces images with Next/Image

I am using the new next/image component to load avatar images from digitaloceanspaces as follow:

import Image from "next/image";

...

<Image
   layout="fill"
   quality={1}
   loader={avatarLoader}
   src="839e7be6-1d2d-4164-bd33-befc3a7613c6_1610115441"
/>

The loader looks like this:

export const avatarLoader = ({ src, width, quality }: ImageLoaderProps) => {
  return `https://donout.ams3.digitaloceanspaces.com/${src}?w=${width}&q=${quality || 75}`;
};

But It's not caching it. And I try adding it on my next.config

module.exports = {
  async headers() {
    return [
      {
        source: "https://donout.ams3.digitaloceanspaces.com/*",
        headers: [
          {
            key: "Cache-Control",
            value:
              "public, max-age=31536000, s-maxage=31536000, stale-while-revalidate",
          },
        ],
      },
    ];
  },
};

But nothing is working. Can anyone tell me how to cache images from remotes urls?