Is it okay to render basic JSX as an invoked function inside the render method?

In our codebase, I keep coming across this pattern of invoking renderXelement() inside the render method. I have heard that it is not a very common pattern for React. Also, I was wondering whether is a thing to avoid at all costs, in a sense that what kind of downsides it has (if any).

See renderCollapsedLinks(). I removed some of the excessive code to make the question more clear.

Example:

export function NavigationDropdownLinksOverlay({
    activeDropdownLink,
    onClickBack,
}: NavigationDropdownLinkOverlay) {
    const { classes } = useStyles();

    const renderCollapsedLinks = (groupLink: DropdownGroupLinks) => {
        return groupLink.links.map((link, index) => (
            <Box mb={index !== groupLink.links.length - 1 ? 'sm' : 0}>
                <Link href={link.link} className={classes.anchorLink}>
                    {link.label}
                </Link>
            </Box>
        ));
    };

    return (
        <MobileNavigationOverlay show={!!activeDropdownLink}>
            <MobileMenuBanner title={activeDropdownLink?.label || ''} />
            <BackButton onClick={onClickBack} />
            <Grid gutter={0} className={classes.linkGridFullWidth}>
              {renderCollapsedLinks()} 
            </Grid>
        </MobileNavigationOverlay>
    );
} 

Of course you can use functions to compute a value. Even in React, even if this value is JSX.

You can even go a step further and move this function out of the component. This makes imo. the component more readable and has the advantage that this function is no longer created on every render:

export function NavigationDropdownLinksOverlay({
    activeDropdownLink,
    onClickBack,
}: NavigationDropdownLinkOverlay) {
    const { classes } = useStyles();

    return (
        <MobileNavigationOverlay show={!!activeDropdownLink}>
            <MobileMenuBanner title={activeDropdownLink?.label || ''} />
            <BackButton onClick={onClickBack} />
            <Grid gutter={0} className={classes.linkGridFullWidth}>
                {renderCollapsedLinks(groupLink.links, classes)}
            </Grid>
        </MobileNavigationOverlay>
    );

}

// renderCollapsedLinks is now a pure function and relies only on the function arguments to produce the returned value.
const renderCollapsedLinks = (links, classes) => {
    const last = links.length-1;

    return links.map((link, index) => (
        // you should add a `key` to `<Box />`
        <Box mb={index !== last ? 'sm' : 0}>
            <Link href={link.link} className={classes.anchorLink}>
                {link.label}
            </Link>
        </Box>
    ));
};