is it possible to define an area in the Material UI SWipeableDrawer that does not respond to the swipe by closing drawer

I have a component with a photo slider in the SwipeableDrawer. And during the attempt to slide the photo, the Drawer is closed. Is it possible in a Drawer to define an area that will not respond to swipes by closing the drawer ? In the documentation, I found the "SwipeAreaProps" property, but how to use it is not clear.SwipeableDrawer layout

My drawer code definition

      <SwipeableDrawer
    className={classes.drawerClass}
    anchor="left"
    classes={{
      paper: classes.drawerPaper,
    }}
    transitionDuration={200}
    open={detailDrawerOpen}
  >
    <DrawerBackButton onClick={onBack} />
    <DetailDrawerContext.Provider value={{ onPhotoSave }}>
      <ScrollBar>
        <DrawerContainer>
          <DetailDrawerHeader
            monument={monument}
            onMonumentPhotoClicked={onMonumentPhotoClicked}
          />
          <DetailDrawerContent monument={monument} />
        </DrawerContainer>
      </ScrollBar>
    </DetailDrawerContext.Provider>
    {monument ? (
      <React.Fragment>
        {photoDialogShow ? (
          <PhotoLightbox
            open={photoDialogOpen}
            setOpen={setPhotoDialogOpen}
            monumentPhotos={monument.monumentPhotos}
            initIndex={selectedMonumentPhotoIndex}
          />
        ) : null}
      </React.Fragment>
    ) : null}
  </SwipeableDrawer>

DetailDrawerHeader

import React, { useState } from "react";
import { makeStyles } from "@material-ui/core";
import DrawerBackButton from "../../common/drawer-back-button/drawer-back-button";
import PhotoCarousel from "./photo-carousel/photo-carousel";

const useStyles = makeStyles((theme) => ({
  imagesContainer: {
    width: "100%",
    height: theme.detailDrawerHeaderHeight,
    flexShrink: 0
  },
}));

export default function DetailDrawerHeader({monument, onMonumentPhotoClicked = p => p}) {
  const classes = useStyles();
  return (
    <div className={classes.imagesContainer}>
      <PhotoCarousel data={monument && monument.monumentPhotos} onMonumentPhotoClicked={onMonumentPhotoClicked}/>
    </div>
  );
}

PhotoCarousel View

return (
    <div className={styles.container}>
      <SwipeableViews
        disableLazyLoading={false}
        index={currentIndex}
        animateTransitions={animateTransitions}
        onChangeIndex={onChangeIndexHandle}
      >
        {sortedPhotos.map((monumentPhoto, i) => (
          <img
            className={styles.img}
            onClick={() => onMonumentPhotoClicked(monumentPhoto)}
            src={monumentService.getPhotoLink(monumentPhoto.photoId, 500)}
            key={i}
          />
        ))}
      </SwipeableViews>
      {currentIndex !== 0 ? (
        <CarouselButtonContainer attachTo="left">
          <IconButton onClick={onLeftButtonClick}>
            <ArrowBackIosIcon className={styles.arrowIcon} />
          </IconButton>
        </CarouselButtonContainer>
      ) : null}
      {currentIndex < sortedPhotos.length - 1 ? (
        <CarouselButtonContainer attachTo="right">
          <IconButton onClick={onRightButtonClick}>
            <ArrowForwardIosIcon className={styles.arrowIcon} />
          </IconButton>
        </CarouselButtonContainer>
      ) : null}
    </div>
  );