import dynamically in ReactJs using for to assign an imported const to different objects

Question

Please be patience, my english is not that good. I am trying to create a for loop to push for each image imported, an object with different values. I want to avoid just setting all the objects i want into the array and try to do it in an optimized way. Any ideas? Here is the code:

/* PNG format */
import client1 from '../assets/images/client1.png';
import client2 from '../assets/images/client2.png';
import client3 from '../assets/images/client3.png';
import client4 from '../assets/images/client4.png';
import client5 from '../assets/images/client5.png';

/* Webp format */
import client1Webp from '../assets/images/client1Webp.webp';
import client2Webp from '../assets/images/client2Webp.webp';
import client3Webp from '../assets/images/client3Webp.webp';
import client4Webp from '../assets/images/client4Webp.webp';
import client5Webp from '../assets/images/client5Webp.webp';

const Clientes = () => {

    const clients = [];

    for (let i = 1; i < 6; i++) {
        clients.push({
            webp: `client${[i]}Webp`,
            img: `client`${[i]}`, /* I thought when this returned "client1" it would take the imported img */
            key: `client${[i]}`
        })
    }

It returns and renders the array as tags.

    return (
        <div>
           { clients.map((client) => {
                return (
                    <picture key={client.key}>
                        <source srcSet={client.webp} />
                        <img src={client.img} alt='cliente'/>
                    </picture>
                )
            })}
        </div>

}