React Chakra UI Other Portal

import React, { useRef } from 'react';
import {
    ChakraProvider,
    Box,
    Portal,
    extendTheme,
    useDisclosure,
    Heading,
    Button,
    Text,
    VStack,
    HStack,
} from '@chakra-ui/react';
const theme = extendTheme({
    styles: {
        global: {
            body: {
                fontFamily: 'Roboto, sans-serif',
                bg: 'gray.100',
            },
        },
    },
});
const geeksData = {
    customContainer: `Explore Python, 
    JavaScript, React, and more!`,
    nestedPortals: `Learn about Python, 
    JavaScript, and React.`,
    optOutNesting: 'Join our MERN Stack Course!',
};
function App() {
    const { isOpen: customContainerOpen,
        onToggle: customContainerToggle } = useDisclosure();
    const { isOpen: nestedPortalsOpen,
        onToggle: nestedPortalsToggle } = useDisclosure();
    const { isOpen: optOutNestingOpen,
        onToggle: optOutNestingToggle } = useDisclosure();
    const containerRef = useRef();
    return (
        <ChakraProvider theme={theme}>
            <Box maxW="800px" mx="auto"
                mt="8" textAlign="center">
                <Heading as="h1"
                    color="green.500" mb="4">
                    GeeksforGeeks
                </Heading>
                <Heading as="h1"
                    color="black.500" mb="4">
                    Chakra UI Other Portal
                </Heading>
                <Box bg='red.400' color='white'
                    p="4" mb="4" borderRadius="md">
                    <Text fontSize="lg">
                        Unlock the World of Coding
                        using GeeksforGeeks,
                    </Text>
                    <Portal containerRef={containerRef}>
                        <Text fontSize="lg">
                            {geeksData.customContainer}
                        </Text>
                    </Portal>
                    <Box ref={containerRef}
                        bg='yellow.500' p="4">
                        <Text fontSize="lg">
                            Container: Hey Geek !
                            Dive In React World,
                        </Text>
                        <Button onClick={customContainerToggle}
                            mt="2" colorScheme="teal" size="sm">
                            Explore Content
                        </Button>
                    </Box>
                </Box>
                <Box bg='teal.500'
                    color='white' p="4" mb="4" borderRadius="md">
                    <Text fontSize="lg">
                        Welcome to the GeeksforGeeks Portal,
                    </Text>
                    <Portal>
                        <Text fontSize="lg">
                            {geeksData.nestedPortals}
                        </Text>
                    </Portal>
                </Box>
                <Box bg='red.400'
                    color='white' ref={containerRef}
                    p="4" mb="4" borderRadius="md">
                    <Button onClick={nestedPortalsToggle}
                        colorScheme="teal" size="sm">
                        Learn More
                    </Button>
                </Box>
                <Box bg='teal.500'
                    color='white' p="4"
                    mb="4" borderRadius="md">
                    <Text fontSize="lg">
                        Embark on a Learning Journey with GFG,
                    </Text>
                    <Portal appendToParentPortal={false}>
                        <Text fontSize="lg">
                            {geeksData.optOutNesting}
                        </Text>
                    </Portal>
                </Box>
                <Box style={{ background: 'red' }}
                    ref={containerRef} p="4"
                    mb="4" borderRadius="md">
                    <Button onClick={optOutNestingToggle}
                        colorScheme="teal" size="sm">
                        Join Course
                    </Button>
                </Box>
                <VStack spacing="4">
                    <Text fontSize="sm" color="gray.500">
                        Explore more GeeksforGeeks
                        content with interactive portals!
                    </Text>
                    <Text fontSize="sm" color="gray.500">
                        Powered by GFG
                    </Text>
                </VStack>
            </Box>
        </ChakraProvider>
    );
}
export default App;