Shaka Player NextJs Custom UI

Question

have been 1 month since I started with Shaka Player. I am not sure if i'm doing something wrong but i cloned the Shaka NextJs example and did try to create some custom button to let me skip videos, as the Docs shows.

Doesn't work!

So, would be great if someone help me do that using NextJs + React function-components instead class-components. Don't need to be anything complex just that let me better understand how it works and don't need to be 'skip', could be something easiest like that issue 'rewind 10' that let the user skip 10 seconds of the video.

for VoD I am using this uiConfigs =>

const uiConfigs = {
    addSeekBar: true,
    controlPanelElements: [
        'play_pause',
        'mute',
        'volume',
        'time_and_duration',
        'spacer',
        'fullscreen',
        'quality',
        'picture_in_picture'
    ],
    volumeBarColors: {
        base: 'rgba(255, 255, 255, 0.3)',
        level: 'rgb(0, 96, 173)'
    },
    doubleClickForFullscreen: true,
    seekBarColors: {
        base: 'rgba(255, 255, 255, 0.3)',
        played: '#e93035',
        adBreaks: 'rgb(255, 204, 0)'
    },
    singleClickForPlayAndPause: true,
}