I tried to make custom gantt chart by this github project.

react gantt chart github project

The reason I chose this project among many projects was because most of the features were implemented, so it was suitable for me, who had just started using React.

The first thing I tried was adding a column to the table.
For this, I added a few column items defined in TaskListHeader.tsx.

export const defaultProps: TOptionalProps = {
//columns: ["Name", "From", "To"],
columns2: ["Name", "From", "To","Duration","Progress","Cost"],
...
},

These column items are stored in an array of type JSX.Element[] called headerBody and then rendered between div elements.

        // *** CONDITIONALS ***
    const headerBody: JSX.Element[] = [];
    columns2.forEach((column, index) => {
        const columnElement = (
            <React.Fragment key={index}>
                {/* COLUMN */}
                <div style={columnStyle}>{column}</div>

                {/* SEPARATOR */}
                {index !== columns2.length - 1 && <div style={columnSeparatorStyle} />}
            </React.Fragment>
        );

        headerBody.push(columnElement);
    });

    return (
        // ROOT
        <div style={rootStyle}>
            {/* HEADER */}
            <div style={headerStyle}>
                {/* BODY */}
                {headerBody}
            </div>
        </div>
    );};
TaskListHeader.defaultProps = defaultProps;

but the page is not modified although refresh and the previous columns value is displayed.

I would know what additional changes I need to make that column items can be added properly.