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 currentDevice state

<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!