i preloading the images in root of the project

const planeImages = [
  '/canvas/plane/1.png',
  '/canvas/plane/2.png',
  '/canvas/plane/3.png',
  '/canvas/plane/4.png',
  '/canvas/plane/5.png',
];

const promise = (src) =>
  new Promise((resolve) => {
    const img = new Image();
    img.src = src;
    img.onload = resolve;
  });

const preloadImages = async (images) => {
  const imagePromises = images.map((src) => promise(src));
  await Promise.all(imagePromises);
};

and want to use in react-pixi

import plane1 from '/canvas/plane/1.png';
import plane2 from '/canvas/plane/2.png';
import plane3 from '/canvas/plane/3.png';
import plane4 from '/canvas/plane/4.png';
import plane5 from '/canvas/plane/5.png';
const images = [plane1, plane2, plane3, plane4, plane5];

// const images = [
//   '/canvas/plane/1.png',
//   '/canvas/plane/2.png',
//   '/canvas/plane/3.png',
//   '/canvas/plane/4.png',
//   '/canvas/plane/5.png',
// ];


<AnimatedSprite isPlaying images={images} animationSpeed={0.4} anchor={{ x: 0.1, y: 0.9 }} />

I tried both way but still duplicate downloands

i want to make one preload and use in pixijs this preloaded images