How to make AMP-carousel work with AMP-script

Is there a way to make the navigation arrows of the AMP-carousel work with AMP-script. Basically what i am trying to achieve is to add a click event to the previous and next arrows. On clicking the prev/next trying to trigger custom function.

<amp-script data-ampdevmode layout="container" script="view-content">
                <button
                  id="image-arrow-next"
                  slot="next-arrow"
                  className="carousel-next"
                  data-vars-navigation-action="Image_Navigation_Right"
                  aria-label="Next"
                  style={{
                    width: '34px',
                    height: '34px',
                    border: 'none',
                    margin: '16px',
                    outline: 'none',
                    backgroundColor: 'rgba(0,0,0,.5)',
                    color: '#fff'
                  }}
                >
                  &#10140;
                </button>
                <button
                  slot="prev-arrow"
                  className="carousel-prev"
                  aria-label="Previous"
                  data-vars-navigation-action="Image_Navigation_left"
                  style={{
                    width: '34px',
                    height: '34px',
                    margin: '16px',
                    backgroundColor: 'rgba(0,0,0,.5)',
                    border: 'none',
                    outline: 'none',
                    transform: 'rotate(180deg)',
                    color: '#fff'
                  }}
                >
                  &#10140;
                </button>
              </amp-script>

and triggering this function on click of prev/next arrows

<script
      id="view-content"
      type="text/plain"
      target="amp-script"
      dangerouslySetInnerHTML={{
        __html: viewContent()
      }}
></script>

    function viewContent() {
    const script = `const btn = document.getElementById('image-arrow-next');
    btn.addEventListener('click', () => {
      console.log('clicked')
    })`
    return `${script.toString()}()`
   }

But the problem is when i wrapped the buttons inside the amp-script both the default navigation arrows of amp-base-carousel and navigation arrows(prev/next) which are present inside the Amp-script shows up in the UI. both the default navigation arrows and the the navigation arrows inside the amp-script gets conflicted with each other