React Js Change Image onhover | change an image src on hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Hover Change</title>
    <style>
        .image-container {
          margin: 0 auto;
            width: 300px;
            /* Adjust as needed */
            height: 200px;
            /* Adjust as needed */
        }

#imageId {
            width: 100%;
            height: 100%;
            transition: transform 0.3s ease-in-out;
            /* Add a smooth transition effect for scaling */
        }

.image-container:hover #imageId {
            transform: scale(1.1);
            /* Scale the image on hover */
        }
    </style>
</head>

<body>

image.addEventListener('mouseover', () => {
            image.style.transition = 'transform 0.3s ease-in-out';
            image.style.transform = 'scale(1.1)';
        });

image.addEventListener('mouseout', () => {
            image.style.transition = 'transform 0.3s ease-in-out';
            image.style.transform = 'scale(1)';
        });

// Change image source after the scaling transition completes
        image.addEventListener('transitionend', () => {
            if (image.style.transform === 'scale(1.1)') {
                image.src = 'https://www.sarkarinaukriexams.com/images/post/1683656146React_Js_Add_Table_Row_Dynamically.jpg';
            } else {
                image.src = 'https://www.sarkarinaukriexams.com/images/post/1696335210React_Js_Add_Two_Number.png';
            }
        });
    </script>

</body>

</html>