Need Help - React-Zoom-Pan-Pinch+FluentUI Modal Pop Up

Team,

Anyone could you please guide on below issue.

Issue: Once Image is zoomed it does not allow to Pan/move to certain area of image. It does work when i remove the code from Modal Tag. But I am showing image in a modal Pop up and allowing user to better zoom in image.

Code:
import React from "react";

import {

TransformWrapper,

TransformComponent,

useControls

} from "react-zoom-pan-pinch";

import { Modal } from "@fluentui/react";

import { ScrollablePane, IScrollablePaneStyles } from '@fluentui/react/lib/ScrollablePane';

function App() {

const Controls = () => {

const { zoomIn, zoomOut, resetTransform } = useControls();

return (

<>

zoomIn()}>Zoom In

zoomOut()}>Zoom Out

resetTransform()}>Reset

</>

);

};

return (

<img

src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"

alt="test"

width="500px"

height="500px"

/>

);

}

export default App;