prevent error occurering due to zoom in -out

src/components/Expenses/PreviewDocument.jsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef ,useEffect} from "react";
 
 const PreviewDocument = ({ imageUrl }) => {
   const [loading, setLoading] = useState(true);
@@ -20,6 +20,16 @@ const PreviewDocument = ({ imageUrl }) => {
     setZoom((prev) => Math.min(Math.max(prev + delta, 0.5), 3));
   };
 
+   useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+    };
+  }, []);
   const handleMouseDown = (e) => {
     if (zoom <= 1) return;
     setIsDragging(true);
@@ -73,7 +83,6 @@ const PreviewDocument = ({ imageUrl }) => {
 
       <div
         ref={containerRef}
-        onWheel={handleWheel}
         onMouseDown={handleMouseDown}
         onMouseMove={handleMouseMove}
         onMouseUp={handleMouseUp}