Table Sorting not working if the table body cell has different icons

const Row = (allTopic || []).map((topic) => {
        return {
            id: topic?.id,
            col1: topic?.name,
            col2: topic?.isDemo ? 'lock_open' : 'lock',
            col3: (
                <CommonIconButton
                    disabled
                    onClick={() => push(

const Row = (allTopic || []).map((topic) => {
        return {
            id: topic?.id,
            col1: topic?.name,
            col2: topic?.isDemo ? 'lock_open' : 'lock',
            col3: (
                <CommonIconButton
                    disabled
                    onClick={() => push(

/school/${topic?.id}

)}
                    icon={topic?.isHidden ? 'visibility_off' : 'visibility'}
                />
            ),
            col4: topic?.yearGroups?.length > 0 ? topic?.yearGroups?.map((y) => y?.shortName).join(', ') : '-',
            col5: topic?.subject,
            col6: topic?.domain?.title,
            col7: topic?.video
        };
});

)}
                    icon={topic?.isHidden ? 'visibility_off' : 'visibility'}
                />
            ),
            col4: topic?.yearGroups?.length > 0 ? topic?.yearGroups?.map((y) => y?.shortName).join(', ') : '-',
            col5: topic?.subject,
            col6: topic?.domain?.title,
            col7: topic?.video
        };
});