How to change Header name dynamically in AG-Grid React?

Question

I want to change the header icon dynamically(i.e. based on the data coming from back end).

I searched through the internet but didn't find much solution and the documentation doesn't had the clear implementation.

So, I thought to share it here.

Sample Code:

export function ColumDefinition(dataFromAPI) {
    return [
        {
            field: 'abc1', 
            resizable: true,
            flex:1,
            headerClass: "xyz1",
            lockPosition: true
        },
        {
            field: 'abc2', 
            width: 140,
            headerClass: "xyz2",
            lockPosition: true
        }
    ] }

Useful Links:

1. AG-Grid dynamic column header text
2. https://blog.ag-grid.com/automatic-header-names/#valuegetter-header-names
3. https://www.ag-grid.com/react-data-grid/value-getters/#header-value-getters