Shapes in plotly using DJango

plotly.js
1

I have this HTML in which plot is being rendered using Python.

<div class="col-md-9">
            <div class="card">
                <div class="card-body" id="plotly-div">
                    {{ plot1 | safe }}
                </div>
            </div>
        </div>

I want to draw rectangle on this above plot.
I am using javascript to do that.

    const plotDiv = document.getElementById('plotly-div');

    // x = [1, 2, 3, 4, 5],
    // y = [10, 20, 30, 20, 10],
    // data = [{x:x, y:y, type:'scatter',
    //          mode:'markers', marker:{size:20}
    //         }],
    // layout = {hovermode:'closest',
    //           title:'Click on Points',
    //  };
    Plotly.newPlot('plotly-div', data, {}, {modeBarButtons: [["drawrect", "eraseshape"]]});
    plotDiv.on('plotly_relayout', function(event)
    {
        console.log(event)
    });

I want to know is there a way to draw on the plot directly without using Plotly.new method.
Because I dont want to generate newplot and If I directly use .ON method
Error is coming " plotDiv.on is not a function"