React Js Download Image from url

<!DOCTYPE html>
<html>

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

function App() {
            const [imageUrl, setImageUrl] = useState(null);

const downloadImage = (imageUrl) => {
                fetch(imageUrl)
                    .then(response => response.blob())
                    .then(blob => {
                        // Create a temporary anchor element
                        const url = window.URL.createObjectURL(blob);
                        const link = document.createElement('a');
                        link.href = url;

// Extract the filename from the URL
                        const filename = imageUrl.substring(imageUrl.lastIndexOf('/') + 1);

// Set the download attribute and filename
                        link.setAttribute('download', filename);
                        document.body.appendChild(link);

// Simulate a click on the anchor element to start the download
                        link.click();

// Clean up the temporary anchor element
                        link.parentNode.removeChild(link);

// Set the downloaded image URL to display on the page
                        setImageUrl(url);
                    })
                    .catch(error => {
                        console.error('Error downloading image:', error);
                    });
            };

const handleDownload = () => {
                const imageUrl = "https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG"; // Replace with your image URL
                downloadImage(imageUrl);
            };

return (
                <div className='container'>
                    <h3>React Js Download Image from Url</h3>
                    <button onClick={handleDownload}>Download Image</button>
                    {imageUrl && <img src={imageUrl} alt="Downloaded Image" />}
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        * {
            box-sizing: border-box;
        }

.container {
            margin: 0 auto;
            width: 600px;
            text-align: center;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            padding: 20px;
        }

h3 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }

button {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
        }

button:hover {
            background-color: #0056b3;
        }

img {
            max-width: 100%;
            height: auto;
            margin-top: 20px;
        }
    </style>
</body>

</html>