Pass props from 'Tab' to 'Pane' (Semantic UI with React JS)

Question

I am using Semantic UI 'Tab' module with React and passing some props from 'Tab' to each 'Pane'. How to access the props in each 'Pane'?

const VideoGallery = () => {
    const [video, setVideo] = useState([]);

    return (
        <div>
            <Tab  
                panes={panes} 
                video={video} //passing 'video' as a prop
            />
        </div>
    )
}

const panes = [
    {
      menuItem: { key: 'allVideos'},
      render: () => 
        <Tab.Pane>
            // Need to access 'video' prop here 
        </Tab.Pane>,
    },
    {
    menuItem: { key: 'oneToOne'},
      render: () => 
        <Tab.Pane>
            // Need to access 'video' prop here 
        </Tab.Pane>,
    },
  ]

Answer 1

If you want use video in panes. you can update panes to a function:

const panes = (video) => {
  return [
    {
      menuItem: { key: "allVideos" },
      render: () => <Tab.Pane >// Using video in here</Tab.Pane>,
    },
    {
      menuItem: { key: "oneToOne" },
      render: () => <Tab.Pane>// Using video in here</Tab.Pane>,
    },
  ];
};


<Tab  
  panes={panes(video)} 
/>