tengo un objeto Si profundiza en el objeto, tiene este objeto al que se accede a través de data[index].gallery.first.mobile/tablet/desktop

 "gallery": { "first": { "mobile": "./assets/product-xx99-mark-two-headphones/mobile/image-gallery-1.jpg", "tablet": "./assets/product-xx99-mark-two-headphones/tablet/image-gallery-1.jpg", "desktop": "./assets/product-xx99-mark-two-headphones/desktop/image-gallery-1.jpg" },

Estoy tratando de acceder a estas imágenes dinámicamente. Entonces, por ejemplo, tengo una función que devolverá ".mobile", etc., según el tamaño de la ventana. Sin embargo, no puedo obtener el retorno de imageSizer para agregar a data[index].gallery.first.{return from imageSizer required here} . Obtengo una mezcla de indefinido o [objeto objeto]. móvil, etc.

Además, a veces imageSizer devuelve .mobile y otras veces devuelve una matriz donde .mobile es el único elemento de la matriz y tiene un índice de 0. Depende si llamo a ImageSizer solo (devuelve ".mobile") o lo agrego a data[0].gallery.first devuelve [objeto objeto][matriz]

 const windowSizeInitial = window.innerWidth const imageSizer = (windowSize = windowSizeInitial) => { if(windowSize <= 600) { return ".mobile" } else if (windowSize <= 1400) { return ".tablet" } else { return ".desktop" } }

Aquí está la etiqueta de la imagen donde intento combinarlos para obtener la notación de puntos correcta necesaria para acceder a la imagen.

 src={data ? `${process.env.PUBLIC_URL}${data[0].gallery.first[imageSizer()]}` : ""} alt="product"

¿Es posible crear una notación de puntos dinámica como yo quiero?

¡Cualquier ayuda es apreciada! ¡Gracias!