React Js Multiple button copy to clipboard

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState } = React
        function App() {
            const sections = [
                {
                    id: 1,
                    code: 'Code snippet 1',
                },
                {
                    id: 2,
                    code: 'Code snippet 2',
                },
                {
                    id: 3,
                    code: 'Code snippet 3',
                },
            ];
           const [copySuccess, setCopySuccess] = useState('');
           const copyToClipboard = (code) => {
                navigator.clipboard.writeText(code)
                    .then(() => setCopySuccess(code))
                    .catch((error) => console.error('Failed to copy to clipboard:', error));
            };

return (
                <div className='container'>
                    <h3>React Js Multiple button Copy to clipboard</h3>
                    {sections.map((section) => (
                        <section key={section.id}>
                            <pre className="content">
                                <code className="code">
                                    <p> {section.code}</p>
                                </code>
                            </pre>
                            <button className='copy-button' onClick={() => copyToClipboard(section.code)}>
                                {copySuccess === section.code ? 'Copied!' : 'Copy to Clipboard'}
                            </button>
                        </section>
                    ))}
                </div>
            );
        };
        ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        .container {
            width: 600px;
            margin: 0 auto;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
            padding: 20px;
            text-align: center;

}

section {
            position: relative;
            margin: 10px;
            padding: 20px;
            background-color: #343a40;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
     .code {

display: block;
            overflow: auto;
            padding: 10px;
            border: 1px solid #ddd;
            background-color: #333;
            font-family: monospace;
            font-size: 14px;
            line-height: 1.4;
            color: #f5f5f5;
            /* Set the text color to a light shade */
        }

.copy-button {
            position: absolute;
            top: 0px;
            right: 0px;
            padding: 8px 16px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

.copy-button:hover {
            background-color: #45a049;
        }

.copy-button:active {
            background-color: #3e8e41;
        }
    </style>

</body>

</html>