React DND-Kit cancel sensors conditionally

Question

I have a set of DIVS (with images) displayed on a css grid. To make the grid of images sortable by dragging and dropping I'm using the dnd-kit library. I want to make it so that if the user is over a particular part in the image div, they cannot drag and sort the image out. I kind of made it work by removing the sensors from the sensors array but I'm getting a React warning

Warning: The final argument passed to useEffect changed size between renders. The order and size of this array must remain constant.

Which makes sense since I'm passing either an empty array or the sensors array if the user is over the trashIcon. . Here is my relevant code:

<div className={Styles.fileUploader__container}>
  <DndContext
    // sensors={sensors}
    // {...(isOverTrashIcon ? {} : { sensors: sensors })}
    sensors={isOverTrashIcon ? [] : sensors}
    collisionDetection={closestCenter}
    onDragStart={handleDragStart}
    onDragEnd={handleDragEnd}
    onDragCancel={handleDragCancel}
  >
    <SortableContext items={imagesList} strategy={rectSortingStrategy}>
      <div className={Styles.fileUploader__container_grid}>
        {imagesList.map((image, index) => (
          <SortablePhoto
            key={index}
            url={image.url}
            item={image}
            index={index}
            isLoading={image.status === 'uploading'}
            onHoverTrashIcon={handleMouseOverTrashIcon}
          />
        ))}
        <div className={Styles.fileUploader__container_upload}>
          <Upload
            name="productImages"
            action="http://localhost:5200/api/uploadImages"
            fileList={fileList}
            showUploadList={false}
            onChange={handleFileChange}
            beforeUpload={handleBeforeUpload}
            multiple={true}
            withCredentials={true}
          >
            <Button loading={isLoading}>Upload</Button>
          </Upload>
        </div>
      </div>
    </SortableContext>
    <DragOverlay adjustScale={true}>
      {activeId ? (
        <Photo url={activeId.url} index={fileList.indexOf(activeId)} />
      ) : null}
    </DragOverlay>
  </DndContext>
</div>

in what other way can I cancel out the dragging if some condition is met. In this case if the user is over a particular part of the sortable object?

I tried by conditionally setting the whole sensors prop in DndContext (not just the value but the prop) but it didn't work the image was still sortable if over the trashIcon. (FYI If I remove the sensors prop the images are still sortable which I don't understand why).

Any ideas and or pointers would be greatly appreciated.

Thanks.