function called in render return undefined

I passed my last 2 days to fix a little problem in my React project (builded with ViteJs, react-router.. and Strapi backEnd) but I need your help !

The case is : I have an images gallery component with a precise structure and images called with an API request to Strapi and saved in an array.
I decide to create a function to check in the array if one of this elements contain a specific name and if it's true send back the URL image.

Finally on my webpage I've an URL with "undefined" but on the function my console.log contain the good URL !

Thanks a lot for any help or suggest, I hope all elements are clear but if need more details, ask me

const myFunc = (type) => {
   data[0]?.attributes?.collection?.data.map((el) => { 
       if (el.attributes.name === type) {
          console.log("THIS IS MY URL :", el?.attributes?.url);
          return el.attributes.url
       } else { return } 
   }
}
   
return (
    ... 
    <div className="categoriesFrame">
        <div className="col">
            <div className="row">
                <img
                    src={import.meta.env.VITE_APP_UPLOAD_URL + myFunc("sale")}
                    alt=""
                />
                <button>
                    <Link className="link" to="/products/0">
                        Sale
                    </Link>
                </button>
            </div>
            <div className="row">
                <img
                    src={import.meta.env.VITE_APP_UPLOAD_URL + myFunc("women")}
                    alt=""
                />
                <button>
                    <Link className="link" to="/products/1">
                        Women
                    </Link>
                </button>
            </div>
        </div>
    </div>
    ...
    // With another div.col and row to make this specific structure.
)

     

I've design an specific frame for a gallery images and this images come from my API request. I just want to match each picture.url to is correct position in the frame.
In the function "myFunc" I tried to create an useState to store the URL inside but it makes an infinite loop and nothing is re-render in front :/

I tried to put an async/await in the function but now in the render it appears "[object Promise]"

Since you're using a { with the arrow function, the implicit return would not work.
You need to explicitly return the value. such as

const myFunc = (type) => {
// notice the return statement below.
return data[0]?.attributes?.collection?.data.map((el) => {
if (el.attributes.name === type) {
console.log('THIS IS MY URL :', el?.attributes?.url);
return el.attributes.url;
} else {
return;
}
});
};

Additionally, you're not using .map in correct way. .map creates a new array based on the value you return from your callback function. The instances where your condition doesn't match, you're returning undefined. So this will create an array that has undefined values where the condition did not match.
Another problem with using .map in this is that it returns an array. so no matter how correctly your map function works, based on your html, you'd always get [object Array] appended to your src url string.

The best would be to use .find method (assuming you have only one match)

const myFunc = (type) => {
const typeAttr = data[0]?.attributes?.collection?.data.find(
(el) => el.attributes.name === type
);
return typeAttr ? typeAttr.attributes.url : '';
};