React Js Show/Display Image on link hover

<!DOCTYPE html>
<html>

</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;

function App() {
      const [isHovered, setIsHovered] = useState(false);

const handleMouseEnter = () => {
        setIsHovered(true);
      };

const handleMouseLeave = () => {
        setIsHovered(false);
      };

return (
        <div className="container">

<a target='_blank'
            href="https://www.sarkarinaukriexams.com/images/editor/1684236637tree-g37135fa70_640.jpg"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
          >
            React Js Show Image on link hover
          </a>
          {isHovered && (
            <div className="image-container">
              <img
                src="https://www.sarkarinaukriexams.com/images/editor/1684236637tree-g37135fa70_640.jpg"
                alt="Image on hover"
              />
            </div>
          )}
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>
  <style>
    /* Container */
    .container {
    font-family: Arial, sans-serif;
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

/* Link styles */
    .container a {
      transition: color 0.3s ease-in-out;
    }

.container a:hover {
      color: #007bff;
      /* Change the color on hover */
    }

/* Image container */
    .image-container {

opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
      z-index: 1;
    }

.container:hover .image-container {
      opacity: 1;
      visibility: visible;
    }

/* Image styles */
    .image-container img {
      max-width: 300px;
      /* Adjust the image width as needed */
      border: 2px solid #007bff;
      /* Add a border around the image */
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      /* Add a subtle shadow */
    }
  </style>
</body>

</html>