ok

src/components/Item.js

@@ -25,6 +25,13 @@ const Item = ({
   const [itemPrice, setItemPrice] = useState(initialPrice);
   const fileInputRef = useRef(null);
 
+  useEffect(() => {
+    if(!isBeingEdit) {
+      setPreviewUrl(imageUrl)
+      fileInputRef.current.value = null; // Clear the input value
+    }
+  }, [isBeingEdit]);
+
   useEffect(() => {
     console.log(imageUrl);
     console.log(selectedImage);
@@ -113,7 +120,7 @@ const Item = ({
           {(isBeingEdit || blank) && (
             <div className={styles.overlay} onClick={handleImageClick}>
               <span>
-                {previewUrl ? "Click To Change Image" : "Click To Add Image"}
+                {previewUrl ? "Ganti" : "Ganti"}
               </span>
             </div>
           )}

src/components/Item.module.css

@@ -55,11 +55,11 @@
 
 .overlay {
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
+  top: 30px;
+  left: 10px;
+  right: 10px;
+  bottom: 30px;
+  background-color: rgba(0, 0, 0, 0.2);
   color: white;
   display: flex;
   justify-content: center;