Good day. When developing the project, I faced the task of creating a diagram, for this the react-simple-flowchart library was used. Now the task is to stylize the elements of the block, that is, you need to align the text in the middle, and make the “linkStatus” element bold, but any manipulations do not affect the appearance. Any information on this would be appreciated.
Code:

import { Spin } from 'antd';
import Flowchart from 'react-simple-flowchart';

interface DataType {
    LinkTitle: string;
    LinkStatus: string;
    TaskAssignTo: string[];
    TaskStatus: string;
    TaskUrl: string;
}

interface FlowChartTabProps {
    itemId: string | null;
    workFlowID: string | null;
    data: DataType[] | null;
    loading: boolean;
}

const initialOpt = {
    x: 0,
    y: 0,
    'line-width': 2,
    'line-length': 50,
    'text-margin': 10,
    'font-size': 14,
    'font-color': 'black',
    'line-color': 'black',
    'element-color': 'black',
    fill: 'white',
    'yes-text': 'yes',
    'no-text': 'no',
    'arrow-end': 'block',
    scale: 1,
    symbols: {
        start: {
            'font-color': '#b84d51',
            'element-color': '#72ed91',
            'font-weight': 'bold',
        },
        end: {
            'font-color': '#b84d51',
            'element-color': '#72ed91',
            'font-weight': 'bold',
        },
    },
    flowstate: {
        'Not Started': { fill: '#dcdede', 'element-color': '#0c0d0d' },
        'In Progress': { fill: '#ace3bd', 'element-color': '#05b339' },
        'Completed': { fill: '#ededca', 'element-color': '#e0e004' },
        'Deferred': { fill: '#f5a6a8', 'element-color': '#ab0903' },
        'Waiting on someone else': { fill: '#dcdede', 'element-color': '#0c0d0d' },
    },
};

const FlowChartTab: React.FC<FlowChartTabProps> = ({ data, loading }) => {
    const generateChartCode = (data: DataType[]): string => {
        if (data.length === 0) return 'st=>start: No Datanst->en';

        const steps: string[] = [];
        let prevTaskStatus = '';

        data.forEach((item, index) => {
            const taskStatus = item.TaskStatus || 'default';
            const taskAssignTo = item.TaskAssignTo.join(', ').replace(/s+/g, '_');
            const taskUrl = item.TaskUrl;
            const linkStatus = <h1>{item.LinkStatus || 'default'}</h1>;
            let displayStatus = taskStatus;

            if (index === 0 && taskStatus === 'Not Started') {
                // If the first task is not started, mark it as in progress
                displayStatus = 'In Progress';
            } else if (taskStatus === 'Not Started' && (index === 0 || prevTaskStatus === 'Completed')) {
                // If a task is not started and the previous task is completed, mark it as in progress
                displayStatus = 'In Progress';
            }

            steps.push(`op${index + 1}=>operation: ${linkStatus}n(${taskAssignTo})|${displayStatus}:>${taskUrl}[blank]n`);
            prevTaskStatus = taskStatus;
        });

        const transitions = steps.map((_, index) => {
            if (index === 0) return 'st->op1';
            return `op${index}->op${index + 1}`;
        });

        return [
            'st=>start: Begin',
            'e=>end: End',
            ...steps,
            ...transitions,
            `op${steps.length}->e`,
        ].join('n');
    };

    const chartCode = generateChartCode(data || []);

    return (
        <div>
            {loading ? (
                <Spin size="large" />
            ) : (
                <Flowchart
                    chartCode={chartCode}
                    options={initialOpt}
                />
            )}
        </div>
    );
};

export default FlowChartTab;