Creating an upnext video side panel [React]

Question

I have an array of objects that I render as a list to a side panel of "recommended" or "Up Next Videos" to the right of the current video playing. Very similar to how youtube has their recommended video side panel.

I am trying to do 2 things.

1. I want to get the index of the current video I am playing so that I can splice the the array of objects to render the next video object in the array that is right directly after the current video play in the array.

2. Then I want to only show 10 videos (10 objects from the array).

So what I was originally trying to do was get map through array in a seperate variable and then add the index to the object and reference that in my next .map function that actually renders the upnext videos. (Obvi bad bcos I am doing two maps over the same array)

Any guidance would be greatly apperciated.

tl;dr I want to display the next video on a sidepanel that is directly after the current video playing and display only 10 items in the array at a time.

Here is what the object looks like

const posts =
[
 {
    "id": 252832,
    "title": "Honey Brunette",
    "instructor_name": "Name",
    "app_thumbnail": "https://<website-url>/wp-content/uploads/2022/03/summer-300x300.jpg",
    "date": "",
    "trailer": "",
    "views": "321",
    "video_url": "https://player.vimeo.com/progressive_redirect/playback/<vimeo-id> /rendition/1080p?loc=external&signature=<vimeo-url>",
    "formula": "",
    "react_video": "https://vimeo.com/<vimeo-id>/<vimeo-id>",
    "price": "50",
    "available": true
 },

  {
    "id": 252765,
    "title": "Title of video",
    "instructor_name": "Name",
    "app_thumbnail": "https://<website-url>/wp-content/uploads/2022/03/summer-300x300.jpg",
    "date": "",
    "trailer": "",
    "views": "321",
    "video_url": "https://player.vimeo.com/progressive_redirect/playback/<vimeo-id> /rendition/1080p?loc=external&signature=<vimeo-url>",
    "formula": "",
    "react_video": "https://vimeo.com/<vimeo-id>/<vimeo-id>",
    "price": "50",
    "available": true
 },
 
 {
    "id": 252878,
    "title": "Honey",
    "instructor_name": "Name",
    "app_thumbnail": "https://<website-url>/wp-content/uploads/2022/03/summer-300x300.jpg",
    "date": "",
    "trailer": "",
    "views": "321",
    "video_url": "https://player.vimeo.com/progressive_redirect/playback/<vimeo-id> /rendition/1080p?loc=external&signature=<vimeo-url>",
    "formula": "",
    "react_video": "https://vimeo.com/<vimeo-id>/<vimeo-id>",
    "price": "50",
    "available": true
 },
  ...

]