How Can I add new columns?

[LampSeeker]

Is this correct how I'm trying to add a new column? No matter which method I edit, Columns are just fixed to the name, from, and To.
I did the following to add a new Column (ex .Cost, Duration) to the TaskTable.

1. Edit property in Task interface in types/public-types.ts (ex. cost : number; duration : number)
2. Edit property in Task interface in node_modules/react-gantt-chart/library/index.d.ts(ex. cost : number; duration : number)
3. Edit columns in TaskList/components/TaskListHeader.tsx
   ( columns: ["Name", "From", "To","Duration", "Progress", "Cost"] )
4. New cells added to the table row. in TaskList/components/TaskListTable.tsx
   {/* END DATE CELL /}
   {showEndDateColumn === true && (
   
   
    {toLocaleDateString(t.end, dateTimeOptions)}
   
   
   )}
   {/ cost*/}
   {(
   <div style={cellStyle} title = {"Cost"}>
    {t.cost}
   
   )}