<select> elements inside of <Slide/>

[David Sanderson]

I have a carousel component where I have select elements with the following markup. I was able to style the carousel to fit my use-case, but the select elements are not selectable onTouch or onClick. I tried changing styling and z-index but have not been able to make the select element interactive within the carousel. Is this possible with pure-react-carousel?

      <CarouselProvider
        infinite={true}
        touchEnabled={true}
        visibleSlides={2}
        naturalSlideWidth={100}
        naturalSlideHeight={100}
        totalSlides={6}
      >
        <Slider>
          <Slide index={0} className="text-center">
           <select>
                         <option>1</option>
                         <option>2</option>
                         <option>3</option>
           </select>
          </Slide>
        </Slider>
        <ButtonBack className="absolute top-8 -left-2"><img src={ArrowLeft}/></ButtonBack>
        <ButtonNext className="absolute top-8 -right-3"><img src={ArrowRight}/></ButtonNext>
      </CarouselProvider>````

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.