Arrows have z-index, that overlays other elements

I can't get CodeSandBox to work, so have made a video showing the change in code via the console.
By changing where the code is inserted in HTML, you are able to remove the z-index of the arrows and thereby they will be contained within the component.

**Screenshot**

**Screen recording**
https://user-images.githubusercontent.com/1698496/122197245-48ffb300-ce98-11eb-9b51-68649d7d6880.mp4

-----

**Explanation**
In the HTML you could re-arrange it and move the button showing the arrow after the imagelist container, so that prev and next arrow are placed same place just after the images.
Because of the semantics they will always be placed on top of the images and the z-index is not relevant.
Then you are able to just remove the z-index of 1 set in css from both and it will still work as intended as shown on the video.