Sorting on custom cell that renders a component

[JamesGarbaczewski]

I have a component I am rendering as the contents of a cell.

const CustomCell = ({value}) => {
    if (value.type === 1) {
        return (
            <FancyText>Great</FancyText>
        )
    }
     if (value.type === 2) {
        return (
            <BoringText>Bad</BoringText>
        )
    }
}

My goal is to sort by the primitive of the text either Great or Bad. If I was to directly rendering either <FancyText>Great</FancyText> or <BoringText>Bad</BoringText> I can make the accessor the children prop. However, in this case I actually need to sort by the results of rendering the component and then the children of that.

This may be the wrong approach and I may be helped more by guidance extracting/rendering/sorting of complex cells.

Thanks