React Chakra UI Other Transitions

import React from 'react';
import {
    ChakraProvider,
    Box,
    Button,
    Collapse,
    Fade,
    ScaleFade,
    Slide,
    SlideFade,
    extendTheme,
    useDisclosure,
    Heading,
} from '@chakra-ui/react';
const theme = extendTheme({
    styles: {
        global: {
            body: {
                fontFamily: 'Roboto, sans-serif',
                bg: 'gray.100',
            },
        },
    },
});
const geeksData = {
    courses: 'Explore our latest courses',
    programming: 'Enhance your programming skills',
    articles: 'Read insightful articles on various topics',
};
function App() {
    const { isOpen: fadeOpen,
        onToggle: fadeToggle } = useDisclosure();
    const { isOpen: scaleFadeOpen,
        onToggle: scaleFadeToggle } = useDisclosure();
    const { isOpen: slideOpen,
        onToggle: slideToggle } = useDisclosure();
    const { isOpen: slideFadeOpen,
        onToggle: slideFadeToggle } = useDisclosure();
    const { isOpen: collapseOpen,
        onToggle: collapseToggle } = useDisclosure();
    return (
        <ChakraProvider theme={theme}>
            <Box maxW="600px" mx="auto"
                mt="8" textAlign="center">
                <Heading as="h1"
                    color="green.500" mb="4">
                    GeeksforGeeks
                </Heading>
                <Heading as="h3"
                    fontSize="xl" mb="6">
                    Chakra UI Other Transitions
                </Heading>
                <Button onClick={fadeToggle}
                    colorScheme="teal" mt="4">
                    Click Me (Fade Transition)
                </Button>
                <Fade in={fadeOpen}>
                    <Box p="4" mt="4" bg="teal.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.courses}
                    </Box>
                </Fade>
                <Button onClick={scaleFadeToggle}
                    colorScheme="blue" mt="4">
                    Click Me (ScaleFade Transition)
                </Button>
                <ScaleFade initialScale={0.9}
                    in={scaleFadeOpen}>
                    <Box p="4" mt="4" bg="blue.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.programming}
                    </Box>
                </ScaleFade>
                <Button onClick={slideToggle}
                    colorScheme="purple" mt="4">
                    Click Me (Slide Transition)
                </Button>
                <Slide direction="bottom"
                    in={slideOpen} style={{ zIndex: 10 }}>
                    <Box p="4" mt="4" bg="purple.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.articles}
                    </Box>
                </Slide>
                <Button onClick={slideFadeToggle}
                    colorScheme="orange" mt="4">
                    Click Me (SlideFade Transition)
                </Button>
                <SlideFade in={slideFadeOpen}
                    offsetY="20px">
                    <Box p="4" mt="4" bg="orange.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.courses}
                    </Box>
                </SlideFade>
                <Button onClick={collapseToggle}
                    colorScheme="green" mt="4">
                    Click Me (Collapse Transition)
                </Button>
                <Collapse in={collapseOpen}
                    animateOpacity>
                    <Box p="4" mt="4" bg="green.500"
                        rounded="md" shadow="md" color="white">
                        {geeksData.programming}
                    </Box>
                </Collapse>
            </Box>
        </ChakraProvider>
    );
}
export default App;