React js open image new tab onclick image

<!DOCTYPE html>
<html>

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

function App() {
      const imageUrl = 'https://www.sarkarinaukriexams.com/images/import/sne4446407201.png';
      const openImageInNewTab = () => {
        window.open(imageUrl, '_blank');
      };

return (
        <div className='container'>
          <h3>React js Open Image New Tab onclick Image</h3>
          <p>Click the image to open it in a new tab:</p>
          <img
            src={imageUrl}
            alt="Click to open in new tab"
            onClick={openImageInNewTab}
            style={{ cursor: 'pointer' }}
          />
        </div>
      );
    }

ReactDOM.render(<App />, document.getElementById('app'));
  </script>

/* Style for the paragraph */
    .container p {
      font-size: 16px;
      color: #333;
      /* You can change the color to your preference */
    }

/* Style for the image */
    .container img {
      width: 200px;
      /* You can adjust the width as needed */
      height: auto;
      border: 2px solid #333;
      /* You can change the border color to your preference */
      border-radius: 5px;
      cursor: pointer;
    }

/* Style for the image when hovered */
    .container img:hover {
      border-color: #007bff;
      /* Change this color to your preference on hover */
    }
  </style>
</body>

</html>