How To Copy Text To The Clipboard In ReactJS?

// Filename - App.js

import Clipboard from "./components/Clipboard.js";

function App() {
    return <Clipboard />;
}   

export default App;

//Filename - components/Clipboard.js

import React, { useState } from "react";
import copy from "copy-to-clipboard";
import {
    Heading,
    Input1,
    Input2,
    Container,
    Button,
} from "./Styles";

const Clipboard = () => {
    const [copyText, setCopyText] = useState("");

    const handleCopyText = (e) => {
        setCopyText(e.target.value);
    };

    const copyToClipboard = () => {
        copy(copyText);
        alert(`You have copied "${copyText}"`);
    };

    return (
        <div>
            <Heading>GeeksforGeeks </Heading>

            <Container>
                <h2> Copy To Clipboard in React JS</h2>

                <Input1
                    type="text"
                    value={copyText}
                    onChange={handleCopyText}
                    placeholder="Enter the text you want to copy"
                />

                <Button onClick={copyToClipboard}>
                    Copy to Clipboard
                </Button>

                <Input2
                    type="text"
                    placeholder="Enter the text you have copied"
                />
            </Container>
        </div>
    );
};

export default Clipboard;

// Filename - Styles.js

import styled from "styled-components";

export const Container = styled.div`
    padding: 2%;
    max-width: 600px;
    margin: 40px auto;
    position: relative;
    text-align: center;
`;
export const Heading = styled.h1`
    text-align: center;
    color: green;
    font-size: 40px;
`;

export const Input1 = styled.input`
    height: 50px;
    width: 80%;
    padding: 0;
    font-size: 25px;
    border-radius: 5px;
`;
export const Input2 = styled.input`
    height: 50px;
    width: 80%;
    padding: 0;
    font-size: 25px;
    margin-top: 50px;
    border-radius: 5px;
`;

export const Button = styled.button`
    padding: 10px;
    font-size: 20px;
    position: relative;
    // left: 30%;
    margin-top: 10px;
    cursor: pointer;
    color: white;
    background-color: green;
    border-radius: 10px;
`;

// Filename - App.js

import Clipboard from "./components/Clipboard.js";
import "./App.css";

function App() {
    return <Clipboard />;
}

export default App;

//Filename - components/Clipboard.js

import React, { useState } from "react";

const Clipboard = () => {
    const [text, setText] = useState(
        "Add text you want to copy"
    );

    const handleCopyClick = async () => {
        try {
            await window.navigator.clipboard.writeText(text);
            alert("Copied to clipboard!");
        } catch (err) {
            console.error(
                "Unable to copy to clipboard.",
                err
            );
            alert("Copy to clipboard failed.");
        }
    };

    return (
        <div className="App">
            <h1 className="geeks">GeeksforGeeks</h1>
            <textarea
                value={text}
                onChange={(e) => setText(e.target.value)}
            />
            <br />
            <button onClick={handleCopyClick}>
                Copy to Clipboard
            </button>
            <textarea />
        </div>
    );
};

export default Clipboard;