Here are some potential solutions to handle this issue while keeping swipe: true:

One approach is to stop the default browser behavior related to touch events (such as scrolling) while you’re performing a swipe. You can try adding an event listener to prevent this:

useEffect(() => {
  const handleTouchMove = (event) => {
    if (event.cancelable) {
      event.preventDefault();
    }
  };

  window.addEventListener('touchmove', handleTouchMove, { passive: false });

  return () => {
    window.removeEventListener('touchmove', handleTouchMove);
  };
}, []);

2.Modern browsers use passive event listeners for touch events to improve performance. However, this could cause issues with canceling the event. You can set the passive: false option to tell the browser you intend to call event.preventDefault():

document.addEventListener('touchstart', (e) => {
  if (e.cancelable) {
    e.preventDefault();
  }
}, { passive: false });

3.You can add a check to ensure that the touch event is cancelable before trying to prevent it:

const handleSwipe = (e) => {
  if (e.cancelable) {
    e.preventDefault();
    // Custom swipe handling logic
  }
};

4.If the built-in swipe functionality is problematic, you can try a different library like react-swipeable to handle the swipe events in a more controlled way.

npm install react-swipeable

import { useSwipeable } from 'react-swipeable';

const handlers = useSwipeable({
  onSwipedLeft: () => console.log('Swiped left'),
  onSwipedRight: () => console.log('Swiped right'),
  preventDefaultTouchmoveEvent: true,
  trackMouse: true,
});

return <div {...handlers}>Swipe here</div>;

These approaches should help in solving the error you’re facing while allowing swipe gestures to function correctly