Spread the renderer's props onto it whole and put what the cell shows inside:
const StarsRenderer: CellContentRenderer = (props) => (
<CellContent {...props} alignAs="text">
<div {...props.interactiveProps}>★★★☆☆</div>
</CellContent>
);
It is a component, so a renderer that uses it is one fiber per cell inside a cached tile; the layer calls the renderer itself as a plain function. A renderer that replaces the text and positions nothing of its own needs nothing else; one that decorates the text wraps CellContentRendererProps.Default instead, which is its own root.
The host a content renderer draws into: the cell's root, placed by the layer, with the renderer's props stripped of what is not for the DOM, its children placed in the cell's content box by the cell's alignment, in the cell's font color and size.