Условный рендеринг родительского компонента в React

Мне нужно в зависимости от условия возвращать либо Porover либо Card с таким же children контентом. Это можно сделать, если вынести children контент в отдельную компоненту и возвращать это так: `

true ? <Popover><ChildrenContent props={props}/></Popover> 
: <Card><ChildrenContent props = {props}/></Card>

` Но мне кажется, что это не самое удачное решение в данном случае

<Popover dataCy="complexValidation">
      <Section marginBottom={3}>
      </Section>

      <Flex flexDirection="column" gap={3}>
        {validations.map((validation) => (
          <Flex.Item key={validation.text}>
            <Flex alignItems="center">
              <Icon name="check_circle" size="large" color={validation.isSuccess ? 'positive' : 'negative'} />

              <Flex.Item>
                <Typography variant="bodyText2" component="span">
                  {validation.text}
                </Typography>
              </Flex.Item>
            </Flex>
          </Flex.Item>
        ))}
      </Flex>
    </Popover>