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

[ravulask]

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 (

<>

<button onClick={() => zoomIn()}>Zoom In

<button onClick={() => zoomOut()}>Zoom Out

<button onClick={() => resetTransform()}>Reset

</>

);

};

return (

);

}

export default App;

[canberkardic]

I have the same problem with bootstrap modal, did you find any solution?