I need the value of my headers turns into a specific color if the value of it it's out of range

Question

I'm using pdfkit-table in nestjs and im currently having troubles with my project where i need that the value of the field 'temperature' that comes from my db, turns of a specific color if the value it's out of a specific range.

I'm currently using the property 'renderer' (base on the documentation of pdfkit-table and "Example Table 2" for it):

 headers: [
       { label:"Temperature (°C)",property:'temperature', align: 'center', valign: 'center', headerColor: HeaderColor, renderer: (value) => {const temperature = parseFloat(value); if (temperature < 18 || temperature > 22) {return `<span style = "color:red;">${value}</span>`;} else {return `<span style="color: ${DataColor};">${value}</span>`}}

       },
           ]

But i'm not getting the result that i want, in the pdf the value of the field temperature appers this way:

<span style = "color:red" 15></span>

Here's the rest of the code:

const PDFDocument = require('pdfkit-table');

async generatePDF(initialDate: string, endDate: string):Promise<Buffer>{const pdfBuffer: Buffer = await new Promise( async resolve => {const doc =  new PDFDocument({size: "letter",bufferPages: true,autoFirstPage: false,layout : 'landscape'});`

        let pageNumber = 0;
        doc.on('pageAdded', () =>{
            pageNumber++;

        doc.font('Helvetica').fontSize(10);
            doc.text(
                "Pag. "+ pageNumber,
                (doc.page.width - 125),
                (doc.page.height - 40),
                {
                    width: 100,
                    align: 'center',
                    lineBreak: false
                }
            );

        const tablePrimary1 = await this.unitService.findUnitByRangeDatesForPDF(initialDate, endDate, 'Primary 1');

        let HeaderColor = "#0e0bab"
        let DataColor = "#0e0bab"

        const Primary = {
            title: { label: "Table", fontSize: 12},
            // subtitle: "Query date range: "+ initialDate + " to " + endDate,
            divider: {
                header: { disabled: false, width: 2, opacity: 1 },
                horizontal: { disabled: false, width: 0.5, opacity: 0.5 },
              },
            headers: [
                { label:"Temperature (°C)",property:'temperature', align: 'center', valign: 'center', headerColor: HeaderColor,
                    renderer: (value) => {const temperature = parseFloat(value); if (temperature < 18 || temperature > 22) {return `<span style = "color:red;">${value}</span>`;} else {return `<span style="color: ${DataColor};">${value}</span>`}}
                },
                      ],
                datas: [],
                rows: tablePrimary1,
                       };

            doc.addPage();
            doc.font('Helvetica-Bold').fontSize(12);
            doc.text("Register of Temperatures",(doc.page.width * 0.5 - 175));
            doc.text('',30,60);
            doc.table(primary1, { width: 750, prepareHeader: () => doc.font("Helvetica-Bold").fontSize(6), prepareRow: (row, indexColumn, indexRow, rectRow, rectCell) => doc.font("Helvetica").fontSize(6),});

            const buffer = [];
            doc.on('data', buffer.push.bind(buffer));
            doc.on('end', () => {
                const data = Buffer.concat(buffer);
                resolve(data);
            });
            doc.end()
    });
    return pdfBuffer;