Good practice when organizing React functional component code (functions, splitting...)

Question

Is there a better solution when it comes to splitting code into sub components, and to writing functions called in render ? For example would it be better to have

const CustomRow = ({ row = {}, ...props }) => {
    const cells = [];
    for (const value of Object.values(row)) {
        cells.push(value);
    }

    return (
        <TableRow>
            {/* Some content */}
            {cells.map((cell, index) => (
                <TableCell key={index++}>{cell}</TableCell>
            ))}
            {/* More content */}
        </TableRow>
    );
};

Or

const CustomRow = ({ row = {}, ...props }) => {
    const getCells = () => {
        const cells = [];
        let index = 0;
        for (const value of Object.values(row)) {
            cells.push(<TableCell key={index++}>{cell}</TableCell>);
        }
        return cells;
    }
    
    return (
        <TableRow>
            {/* Some content */}
            {getCells()}
            {/* More content */}
        </TableRow>
    );
};

And more generally, how good or bad is it to split such components ? Assuming I have a bigger CustomTable component, which I've broken down in CustomRow, CustomHeaders, ... I'm not really sure to know the reasonable limit to start exploding big components into small chunks; I've started splitting methods and Component as soon as they tend to become long enough to cause confusion (which can be quick), but I don't know if there are strong opinions that go against this ?

Splitting code seems to give more readability and a clear overview, but I don't have many experienced colleagues regarding React, so I'm unsure about what others do. I know there is a lot of freedom regarding code organization but I want to know more about others habits