can you use Generics instead of Union Types in this piece of code?
import * as React from 'react'
import { Box, BoxProps, Icon, RichText, RichTextProps, TextLink, TextPreset } from '../..'
import type { LinkHtmlProps } from '../../../definition/HTMLAttributes'
import type { WithChildren } from '../../../definition/ReactElementChildren'
import type { IconographyProps } from '../../iconography/Iconography'
import * as styles from './Faq.css'

type FaqsDesignProps =
    | {
          _tag: 'default'
          isOpen?: boolean
          onOpen?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
          onClose?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
      }
    | {
          _tag: 'unCollapsible'
      }

export interface FaqProps extends WithChildren {
    element: React.ReactNode
    titleComponent?: BoxProps['component']
    link?: LinkHtmlProps
    icon?: React.ReactElement<IconographyProps>
    children: RichTextProps['children']
    design?: FaqsDesignProps
}

export const Faq: React.FC<FaqProps> = ({
    element,
    titleComponent = 'h3',
    icon,
    link,
    children,
    design = { _tag: 'default' },
}) => {
    const [open, setOpen] = React.useState((design._tag === 'default' && design.isOpen) ?? false)
    // eslint-disable-next-line no-nested-ternary
    const boxShadow = design._tag === 'unCollapsible' ? undefined : open ? 'drop-2' : 'drop-1'
    const maxHeight = design._tag === 'default' && open ? '800px' : '0'

    return (
        <Box
            borderRadius="xs"
            backgroundColor="white"
            overflow={design._tag === 'default' ? 'hidden' : undefined}
            boxShadow={boxShadow}
        >
            <Box
                onClick={
                    design._tag === 'unCollapsible'
                        ? undefined
                        : e => {
                              const s = !open
                              setOpen(s)

                              if (s) {
                                  design.onOpen && design.onOpen(e)
                              } else {
                                  design.onClose && design.onClose(e)
                              }
                          }
                }
                paddingRight="m"
                cursor={design._tag === 'default' ? 'pointer' : undefined}
                display="flex"
                justifyContent="spaceBetween"
                alignItems="center"
            >
                <Box
                    padding="s"
                    border="primary300-m-left"
                    className={styles.titleBorder}
                    display="inlineFlex"
                    alignItems="flexStart"
                >
                    {icon && React.cloneElement(icon, { scale: 1.5, fontColor: 'primary300' })}
                    <TextPreset
                        component={titleComponent}
                        preset="title-xs"
                        fontWeight="bold"
                        marginLeft={icon ? 'xs' : undefined}
                    >
                        {link ? <TextLink {...link}>{element}</TextLink> : element}
                    </TextPreset>
                </Box>
                {design._tag === 'default' && (
                    <Box flexShrink={0}>
                        <Icon name="chevronSmall" direction={open ? 'up' : 'down'} fontColor="grey300" scale={1.5} />
                    </Box>
                )}
            </Box>
            <Box transition="medium" style={{ maxHeight: design._tag === 'default' && !open ? maxHeight : undefined }}>
                <RichText
                    component="p"
                    className={styles.faqContent}
                    border={design._tag === 'default' ? 'neutralWarm300-s-all' : undefined}
                    paddingX="m"
                    paddingY={design._tag === 'default' ? 'm' : 'xxs'}
                    fontColor="grey500"
                >
                    {children}
                </RichText>
            </Box>
        </Box>
    )
}