how can I conditionally disable mouse swiping on swiper in react

Question

In a React app, I am using swiper to swipe 3 sliders. I have arrows and mouse slider enabled. Its working as expected:

<Swiper onSwiper={(s) => { props.setSwiper(s); }} navigation={true} className="mySwiper" initialSlide={props.initialWindowNum} onSlideChange={(swiperCore) => { const { activeIndex } = swiperCore; setCookie('WindowNumber', activeIndex.toString(), 300) }} >

    <SwiperSlide>
        <Chart {...props} chartTo={chartTo} chartTitle="Chart1" chartData={props.chartData1} />
    </SwiperSlide>

    <SwiperSlide>
        <Chart {...props} chartTo={chartTo} chartTitle="Chart2" chartData={props.chartData2} />
    </SwiperSlide>


    <SwiperSlide>
        <Chart {...props} chartTo={chartTo} chartTitle="Chart3" chartData={props.chartData3} />
    </SwiperSlide>

</Swiper>

This implementation allows for sliding between the charts by mouse and by clicking the arrows.

How can I disable sliding with a mouse but keep the arrows in place to slide to each chart?