Working with react-image-crop and react-zoom-pan-pinch

Question

For anyone who has worked with both libraries above, I'm trying to accomplish the following feature:

User will be able to view, rotate, zoom, pan images and once on the desired location of the image, will be able to crop the area.

The first problem that I have is that "ReactCrop" does not allow me to crop when inside the "TransformComponent" but the only way to pass in a child to it is by locating it between the components. I can see the crosshair to crop but when I try to drag across the image it just moves the image around (react-zoom-pan-pinch behavior)

                  const [isDisabled, toggleIsDisabled] = useState(true);

                  const onClickCrop = () => {
                  toggleIsDisabled(!isDisabled)
                  }      
                  const handleOnCropChange = () => {
                  // pick up crop changes 
                  } 
                  const handleOnCompleteCrop = () => {
                  // do something when done with crop
                  }            

                  return(
                   <TransformWrapper>
                   {({ zoomIn, zoomOut }) => (

                   // some code here to handle image zoom...

                   <Button onClick={onClickCrop}>
                      {isDisabled ? 'Crop: Off' : 'Crop: On'}
                    </Button>
                    <Box>
                      <TransformComponent>
                        <ReactCrop
                          crop={crop}
                          src={file}
                          onChange={handleOnCropChange}
                          onComplete={handleOnCompleteCrop}
                          disabled={isDisabled}
                        />
                      </TransformComponent>
                    </Box>
                   )}
                   </TransformWrapper>)

If anyone has any other ideas to accomplish the above functionality, I'd be very interested in exploring them as well. Thank you!