prevent main tsx code from disappearing completely

[ayodeji-ti]

For an invalid code, the app now displays // 🚨 Your props contains invalid code but also with the unformated invalid code under it e.g

// 🚨 Your props contains invalid code

import React, { RefObject } from 'react'
import { ChakraProvider, Box, Center, Button, Text } from '@chakra-ui/react'

type AppPropsTypes = { muName: string }

const App = ({ muName }: AppPropsTypes) => (
 <ChakraProvider resetCSS>
 <Center
    display="flex"  flexDirection="column"
      alignItems="center"
      justifyContent="flex-start"
      m={16}
      p={8}
      backgroundColor="cyan.100"
      bgGradient="linear(to right, green.200,blue.500)"
    >
      <Text opacity={1} fontWeight="bold" fontSize="lg" letterSpacing="widest">
        Some t blah blah blah
      </Text>
      <Button
        variant="ghost"
        size="md"
        bgGradient="linear(to right, messenger.500,green.500)"
        borderRadius={100}
        border={20}
      >
        Test button
      </Button>
    </Center>
  </ChakraProvider>
)

export default App

This way, if the code in the main tsx is invalid, the whole code won't just disappear like it did when we were having our final presentation, we will just have this comment on the first line, and the unformatted code below it.