React Material UI Disable Button for 5 Seconds

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="root"></div>
    <script type="text/babel">
        function App() {
            const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);

const handleClick = () => {
                setIsButtonDisabled(true); // Disable the button
                // You can add any other logic or actions you want here

// Simulate a delay, you can replace this with your actual logic
                setTimeout(() => {
                    setIsButtonDisabled(false); // Enable the button after a delay
                }, 5000); // 2000 milliseconds (2 seconds) delay in this example
            };
            return (
                <Container maxWidth="md" sx={{ boxShadow: 1, p: 2 }}>
                    <Typography variant="h4" component="h1" gutterBottom>
                        React Material UI Disable Button for 5 Seconds
                    </Typography>
                    <Button
                        variant="contained"
                        color="primary"
                        onClick={handleClick}
                        disabled={isButtonDisabled}
                    >
                        {isButtonDisabled ? 'Processing...' : 'Click Me'}
                    </Button>
                </Container>
            );
        }
    </script>
    <script type="text/babel">
        const { colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, Button, } = MaterialUI;
        const theme = createTheme({
            palette: {
                primary: {
                    main: '#556cd6',
                },
                secondary: {
                    main: '#19857b',
                },
                error: {
                    main: colors.red.A400,
                },
            },
        });

const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <App />
            </ThemeProvider>
        );
    </script>
</body>

</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />
    <title>My Page</title>
    <!-- Material-UI CSS -->
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <!-- React and Material-UI scripts -->
    <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@mui/material@latest/umd/material-ui.development.js"
        crossorigin="anonymous"></script>
    <!-- Babel for JSX -->
    <script src="https://unpkg.com/@babel/standalone@latest/babel.min.js" crossorigin="anonymous"></script>
</head>
​
<body>
    <div id="root"></div>
    <script type="text/babel">
        function App() {
            const [isButtonDisabled, setIsButtonDisabled] = React.useState(false);
​
            const handleClick = () => {
                setIsButtonDisabled(true); // Disable the button
                // You can add any other logic or actions you want here
​
                // Simulate a delay, you can replace this with your actual logic
                setTimeout(() => {
                    setIsButtonDisabled(false); // Enable the button after a delay
                }, 5000); // 2000 milliseconds (2 seconds) delay in this example
            };
            return (
                <Container maxWidth="md" sx={{ boxShadow: 1, p: 2 }}>
                    <Typography variant="h4" component="h1" gutterBottom>
                        React Material UI Disable Button for 5 Seconds
                    </Typography>
                    <Button
                        variant="contained"
                        color="primary"
                        onClick={handleClick}
                        disabled={isButtonDisabled}
                    >
                        {isButtonDisabled ? 'Processing...' : 'Click Me'}
                    </Button>
                </Container>
            );
        }
    </script>
    <script type="text/babel">
        const { colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, Button, } = MaterialUI;
        const theme = createTheme({
            palette: {
                primary: {
                    main: '#556cd6',
                },
                secondary: {
                    main: '#19857b',
                },
                error: {
                    main: colors.red.A400,
                },
            },
        });
​
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(
            <ThemeProvider theme={theme}>
                <CssBaseline />
                <App />
            </ThemeProvider>
        );
    </script>
</body>
​
</html>