Material UI Set Max Length in Text field - MUI

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

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

function App() {
            const [text, setText] = useState('');
            const [error, setError] = useState(false);

const handleInputChange = (e) => {
                const inputText = e.target.value;
                const maxLength = 10;

if (inputText.length <= maxLength) {
                    setText(inputText);
                    setError(false);
                } else {
                    setError(true);
                }
            };

return (
                <Container maxWidth="md" sx={{ boxShadow: 1, p: 2 }}>
                    <Typography variant="h4" component="h1" gutterBottom>
                     Material ui Set Max Length in MUI TextField
                    </Typography>
                    <TextField
                        label="Max Length"
                        value={text}
                        onChange={handleInputChange}
                        error={error}
                        fullWidth
                        helperText={error ? 'Text is too long' : ''}
                    />
                </Container>
            );
        }
    </script>
    <script type="text/babel">
        const { colors, CssBaseline, ThemeProvider, Typography, Container, createTheme, TextField } = 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>