React Js Copy Paste Image Clipboard

<!DOCTYPE html>
<html>

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

function App() {
            const [imageDataURL, setImageDataURL] = useState(null);

const onPaste = (event) => {
                const clipboardData = event.clipboardData || window.clipboardData;
                const items = clipboardData.items;

for (let i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        const imageFile = items[i].getAsFile();
                        processImage(imageFile);
                    }
                }
            };

const processImage = (imageFile) => {
                const reader = new FileReader();
                reader.onload = (event) => {
                    setImageDataURL(event.target.result);
                };
                reader.readAsDataURL(imageFile);
            };

return (
                <div className='container'>
                    <h3 className='title'>React js Copy Paste Image Clipboard</h3>
                    <div
                        className='paste-container'
                        ref={(ref) => {
                            if (ref) {
                                ref.addEventListener('paste', onPaste);
                            }
                        }}
                    >
                        Click here and use Control-V to paste the image.
                    </div>
                    <br />
                    {imageDataURL && <img src={imageDataURL} alt="Pasted Image" className='pasted-image' />}
                </div>

);
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            width: 500px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

.title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }

.paste-container {
            border: 2px dashed #ccc;
            padding: 20px;
            cursor: pointer;
            text-align: center;
            background-color: #f5f5f5;
        }

.pasted-image {
            max-width: 100%;
            margin-top: 20px;
        }
    </style>
</body>

</html>