Delete rather than hide area outside clipPath SVG (React-Native) - react-native

Question

I am creating a jigsaw puzzle in React Native ios. I have paths and one image, I am using a loop to create SVG elements of each puzzle piece. However, when I use Draggable from 'react-native-draggable' to drag each piece, I realize that the clipPath to create the pieces only hides the rest of the image rather than deleting it, so the draggable is available on the whole image rather than just the piece.
This is my code for generating a list of the pieces which I just render in my return function as {pieces}:
const gen = () => {
let xC = 5, yC = 7;
let width = 380, height = 540;
let piece_width = Math.floor(width / xC), piece_height = Math.floor(height / yC);
const out = new JigsawGenerator({ width: width, height: height, xCount: xC, yCount: yC, radius: 20, fixedPattern: false });
let cells = out["cells"]; // 2d array of paths
let pieces = [];
let k = 0;
for (let i = 0; i < cells.length; i++) {
for (let j = 0; j < cells[i].length; j++) {
let p = cells[i][j];
pieces.push(
<Draggable>
<SVG.Svg
width={width}
height={height}
fill="none"
key={k}
>
<SVG.Defs>
<SVG.ClipPath id="clip" >
<SVG.Path
d={p}
stroke="black"
strokeWidth={3}
strokeLinecap="round"
strokeLinejoin="round"
/>
</SVG.ClipPath>
</SVG.Defs>
<SVG.Image
width={width}
height={height}
preserveAspectRatio="xMidYMid slice"
href={img_src}
clipPath="url(#clip)"
/>
</SVG.Svg>
</Draggable>
);
k++;
}
};
return pieces;
};
This is an example of what one of the pieces looks like, with a border around the SVG element. I just want the piece itself to be clickable/draggable, but I can drag from anywhere inside the border and the whole rectangle is dragged:
example singular jigsaw piece
I would really appreciate if anyone had any ideas on how to make it so that the area outside the clipPath is deleted/won't be included in Draggable!