Chartjs-plugin-zoom drag option doesn't work

Question

Using Chart.js with chartjs-plugin-zoom and chartjs-plugin-streaming the drag option shows the selected area but doesn't resize. The wanted effect is to select a specific area and view only the selection, with x and y axes resizing accordingly.

This is the code:

const options = {
    maintainAspectRatio: false,
    interaction:{
        intersect: false 
    },
    plugins: {
        zoom: {
            pan: {
                enabled: true,
                mode: 'xy',
                modifierKey: 'ctrl'
            },
            zoom: {
                mode: 'xy',
                wheel: {
                    enabled: true
                },
                drag: {
                    enabled: true,
                    backgroundColor: 'rgba(225,225,225,0.5)'
                }
            }
        },
        annotation: {
            annotations: {
                box1: {
                    type: 'box',
                    yMin: 0.70,
                    yMax: 0.90,
                    backgroundColor: 'rgba(204, 204, 255, 0.25)',
                    borderColor: 'rgba(204, 204, 255, 0.25)'
                },
                box2: {
                    type: 'box',
                    yMin: 0.30,
                    yMax: 0.50,
                    backgroundColor: 'rgba(1, 121, 111, 0.25)',
                    borderColor: 'rgba(1, 121, 111, 0.25)'
                },
                line: {
                    type: 'line',
                    scaleID: 'x',
                    value: Date.now(),
                    borderColor: 'black',
                    borderWidth: 3,
                }
            }
        }
    },
    scales: {
        x: {
            type: 'realtime',
            realtime: {
                refresh : 5000, // 5 seconds
                ttl: 172800000, //2 days
                duration: 7200000, //2 hours
                delay: -3600000, // - 1 hour
                frameRate: 0.20,
                onRefresh: chart => {
                    const line = chart.options.plugins.annotation.annotations.line;
                    chart.data.datasets.forEach(dataset => {
                        if(dataset != chart.data.datasets[1]){
                            dataset.data.push({
                                x: Date.now(),
                                y: Math.random()
                            });
                        }
                    });
                    line.value = Date.now();
                }
            }
        },
        y:{}
    }
}

In the image below the upper chart is not zoomed and the lower chart is the result after dragging an area. The selected area should be the only thing visible, the axes should be resized showing only the interval selected and the scrolling effect should stop. While in this case the selected area moves when the chart updates but the other data is hidden and no resizing is made on the x axes.