Updating state to other State in Markdown Map

[nicovon24]

Hello, I'm developing a markdown widget that renders a map of all pressure devices from a client. The issue I'm facing is in passing device information to show its timeline in the chart. I'm currently unable to see anything in the chart and am seeking a solution.

This is the dashboard state rendering in the map code and do not know how to pass the item information in the chart from the other state to the currentDevicestate

<tb-dashboard-state
fxFlex
    [ctx]="ctx"
    [syncParentStateParams]="true"
    [stateId]="'device_timeline'"
    class="frame-state"
    [entityParamName]="'currentDevice'" 
></tb-dashboard-state>

Card without the chart I want to add:

Father state and childs, with the chart added without being able to show data:

Child state:

Complete function

var map = dataItems.map(item=>{
    var active = item.active
    var status = item["Asset Status"]
    var pressure = item.pressure
    var battery = item.battery
    var rssi = item.rssi
    var alarm = item.activeAlarm
    var asset_status_confirmed = item.asset_status_confirmed
    var color = 'black'
    var statusButtonColor = ""
    var unit = data[1].Unit
    var pressure = getPressure(item.pressure, unit)
    htmlVAL = `data-value="${item.entityName}"`

    /***************uncomment this******************/
    if(active=='false' || active==false){
        bgColor = '#565656'
        statusButtonColor = "#dbd3d3"
        color  = 'white'
    }
    else if(status=='true' || status==true){
        bgColor = '#279B54'
        statusButtonColor = "#aee8be"
        color  = 'white'
        if(pressure<0.25){
            bgColor = '#FFC700'
            statusButtonColor = "#ffeba3"
            color  = 'black'
        }
    }
    else{
        bgColor = '#E25A5A'
        statusButtonColor = "#e8a2a2"
        color  = 'white'
    }

    if(filterByAssetStatus.includes("asset on")){
        if(status=='true' || status==true){
            return null
        }
         if(parseFloat(pressure) >= 0.25){
             return null
         }
    }
    if(filterByAssetStatus.includes("asset off reported on")){
         /*if((status=='true' || status==true)){
             return null
         }*/
         if((status=='true' || status==true) && pressure<0.25){
             return null
         }
    }
    if(filterByAssetStatus.includes("asset off")){
         if(status=='false' || status==false){
             return null
         }
    }
    if(filterByAssetStatus.includes("device off")){
         if(active=='false' || active==false){
             return null
         }
    }

    var avgPressure = 0
    if(item.avgPressure){
        avgPressure = getPressure(item.avgPressure, unit)
    }

    var maxPressure = 0
    if(item.maxPressure){
        maxPressure = getPressure(item.maxPressure, unit)
    }

    var minPressure = 0
    if(item.minPressure){
        minPressure = getPressure(item.minPressure, unit)
    }
    var activeColor = item.active==true ? 'green' : 'red'

    /*
        ${`<span class="material-symbols-outlined circle-icon" style="color: ${statusButtonColor};" id="statusButton"  ${htmlVAL}>
            expand_circle_up
        </span>`}
    */

    var currentDevice = {
        entityId: item.entityId,
        entityName: item.entityName,
        entityLabel: item.entityLabel
    }

    /*stateParams.currentDevice = currentDevice*/

    //<div class="flex-center" ${htmlVAL}>${item.entityName}</div>
    return `<div class="subContainer ${color}" style="background-color: ${bgColor};" id="sensor" value="${item.entityName}" ${htmlVAL}>
        <div style="font-weight: 700; font-size: 20px;" ${htmlVAL}>${item.entityLabel}</div>
        <div class="items-center" ${htmlVAL}>
            <span class="material-icons icon" ${htmlVAL}>
                compress
            </span>
            <div class="pressure-info" ${htmlVAL}>
                <div ${htmlVAL}>
                    <span ${htmlVAL}>CURR</span>
                    <span class="pressure-value pressure-curr"  ${htmlVAL}>${pressure}</span>
                    <span ${htmlVAL}>${unit}</span>
                </div>
                <div ${htmlVAL}>
                    <span ${htmlVAL}>MIN</span>
                    <span class="pressure-value" ${htmlVAL}>${minPressure}</span>
                    <span ${htmlVAL}>${unit}</span>
                </div>
                <div ${htmlVAL}>
                    <span ${htmlVAL}>AVG</span>
                    <span class="pressure-value" ${htmlVAL}>${avgPressure}</span>
                    <span ${htmlVAL}>${unit}</span>
                </div>
                <div ${htmlVAL}>
                    <span ${htmlVAL}>MAX</span>
                    <span class="pressure-value" ${htmlVAL}>${maxPressure}</span>
                    <span ${htmlVAL}>${unit}</span>
                </div>
            </div>
        </div>
        <div style="display: flex; justify-content: space-between;" class="info-container" ${htmlVAL}>
            <div class="items-center text" ${htmlVAL}>
                ${getBatteryText(battery).icon}
                ${getBatteryText(battery).text}
            </div>
            <div class="items-center text" ${htmlVAL}>
                ${getSignalText(rssi).icon}  ${getSignalText(rssi).text}
            </div>
            <!--<div style="color: white" class="text" ${htmlVAL}>
                <span ${htmlVAL}>${status==true || status=='true' ? 'On for ' : 'Was on '} ${(formatTimeFromSeconds(item.OnTime/1000))}</span>
            </div>-->
        </div>
        <div class="alarmsContainer" ${htmlVAL}>
            <div class='statusContainer' ${htmlVAL}>
                ${alarm ? `${alarm}<span class="material-symbols-outlined" id="alarm"  ${htmlVAL}>
                        warning</span>` : ''}</div>
            <div class='alarmContainer' ${htmlVAL}>
                ${asset_status_confirmed==false ? `<span class="material-symbols-outlined circle-icon" style="color: ${statusButtonColor};" id="turn-on"  ${htmlVAL}>
                            check_circle
                        </span>` : '<div></div>'}
                ${asset_status_confirmed==true ? `<span class="material-symbols-outlined circle-icon" style="color: ${statusButtonColor};" id="turn-off"  ${htmlVAL}>
                            cancel
                        </span>` : '<div></div>'} 
            </div>
        </div>
        <div style="text-align: right;">
            <span class="material-icons" style="cursor: pointer" ${htmlVAL} id="device_timeline">
                dashboard
            </span>
        </div>
        <tb-dashboard-state
          fxFlex
          [ctx]="ctx"
          [syncParentStateParams]="true"
          [stateId]="'device_timeline'"
          class="frame-state"
          [entityParamName]="'currentDevice'" 
        ></tb-dashboard-state>
    </div>`;
})

Thanks!