Cropping image taken to a certain size

Hi there!

I am trying to use ImageManipulator to crop an image using a placeholder in the camera but I pass the coordinates and it does not capture the image correctly.

  const [overlay, setOverlay] = React.useState({});

  const handlePick = async () => {
    let photo = await this.camera.takePictureAsync({ exif: true });
    transFormImage(photo);
  };

  const transFormImage = async photo => {
    var ratio = overlay.width / photo.width;
    const manipResult = await ImageManipulator.manipulateAsync(
      photo.uri,
      [
        {
          crop: {
            originX: overlay.x,
            originY: overlay.y,
            width: overlay.width / ratio,
            height: overlay.height / ratio
          }
        }
      ],
      {
        format: "jpeg",
        compress: 0.9
      }
    );
    setTransform(manipResult.uri);
  };

     <Camera
            ref={ref => {
              this.camera = ref;
            }}
            style={{
              width: "100%",
              height: "100%",
              justifyContent: "center",
              alignItems: "center"
            }}
          >
            <View
              onLayout={event => {
                const layout = event.nativeEvent.layout;
                setOverlay(layout);
              }}
              style={{
                position: "absolute",
                left: 30,
                top: 250,
                backgroundColor: "red",
                width: 140,
                height: 40
              }}
            ></View>
            <Button
              onPress={handlePick}>
              <Text>Take picture</Text>
            </Button>
          </Camera>

Has anyone worked on something similar that can give me some guidance on where to continue?

Cheers