how to fill queueData items in react native google cast

Question

I apologize in advance if my question is a bit silly, but I'm completely blocked..

I'm just looking to load multiple video into react native google cast via .loadMedia function.

I have try something like that :

client.loadMedia({
  queueData: {
    items: [
      lstEpisodeCast.map((item)=>{
          {
            mediaInfo: {
              contentUrl:
                url,
              metadata: {
                images: [
                  {
                    url:imgUrl,
                  },
                ],
                title: title,
                subtitle:subTitle,
                studio: studio,
                type: 'movie',
              },
            },
            startTime: 0,
          }
      })
    ],
  },
})

I have try with and without hook..nothing I have try a lot of way..but atm..im really stuck..

So the question is, how can i fill this queueData, with this :

function getAllEpisode(){
  return fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      console.log(JSON.stringify(responseJson.getAllEpisode))
    })
    .catch((error) => {
      console.error(error);
    });
}

why this code is not good and how can i get this works...

i'm a bit lost, i don't know if i'm tired or if it's because the covid but i'm feeling really dumb tonight...

if anyone can help me i will be very grateful..

Page Code :

import React,{useState,useRef,useEffect } from 'react'
import { CastButton, useRemoteMediaClient } from 'react-native-google-cast'
const [lstEpisodeCast,setLstEpisodeCast] = useState([]);

function MyComponent() {
  
  const client = useRemoteMediaClient()
  
  if (client) {
    
    return fetch(hiddenUrl)
      .then((response) => response.json())
      .then((responseJson) => {
        setLstEpisodeCast(responseJson.getAllEpisode)
        console.log(JSON.stringify(responseJson.getAllEpisode))
      })
      .catch((error) => {
        console.error(error);
      });
      
      client.loadMedia({
          queueData: {
            items: [
              lstEpisodeCast.map((item)=>{
                  {
                    mediaInfo: {
                      contentUrl:
                        url,
                      metadata: {
                        images: [
                          {
                            url:imgUrl,
                          },
                        ],
                        title: title,
                        subtitle:subTitle,
                        studio: studio,
                        type: 'movie',
                      },
                    },
                    startTime: 0,
                  }
              })
            ],
          },
        })

  }
  return <CastButton style={{ width: 24, height: 24 }} />
}

export default MyComponent

I have also try something like that :

import React,{useState,useRef,useEffect } from 'react'

function GetAllEpisode(){
  return fetch(hiddenUrl)
    .then((response) => response.json())
    .then((responseJson) => {
      const omg = [];
      responseJson.getAllEpisode.map((item)=>{
              omg.push({
                mediaInfo: {
                      contentUrl:
                        url,
                      metadata: {
                        images: [
                          {
                            url:imgUrl,
                          },
                        ],
                        title: title,
                        subtitle:subTitle,
                        studio: studio,
                        type: 'movie',
                      },
                    },
                    startTime: 0,
                  }
              })
          })
          return omg;
    })
    .catch((error) => {
      console.error(error);
    });
}

export default GetAllEpisode;

and import

client.loadMedia({
  queueData: {
    items: <Omg/>,
  },
})

but the result is just terrible... I'm new to react native but it's okay I'm not doing too badly, but here for once.. it seems so simple to me.. but I'm getting there..

Thanks guys...i really need your help...

/Update/

This code is working, cast is ok on the screen with all vids but i got an error

Code :

.
.
.


return fetch(`hiddenUrl`)
  .then((response) => response.json())
  .then((responseJson) => {
    console.log('data from cast serie : '+responseJson.getAllEpisode)


    let omg = [];

    responseJson.getAllEpisode.map((item)=>{

            omg.push({
              mediaInfo: {
                contentUrl:
                  'hiddenUrl/'+item.frame,
                metadata: {
                  images: [
                    {
                      url:
                        item..images_CAST,
                    },
                  ],
                  title: item.name_serie+' : '+item..nbSeasonCAST+' - Épisode '+item.episode,
                  subtitle:
                    item..subTitle_CAST,
                  studio: item..actors_CAST,
                  type: 'movie',
                }
              }
            })



        })
        client.loadMedia({
          queueData: {
            items: omg,
          },
        })
 
  })
  .catch((error) => {
    console.error(error);
  });

.
.
.

Error :

Objects are not valid as a React Child ( found: obkect with keys(_U,_V,_W,_X). If u meant to render a collection of children, use an array instead.

Someone can help me please ?