Cannot read properties of null (reading 'insertAdjacentHTML') at new Poll

Question

I'm checking the chrome console if it is working... it should return "root: div.poll" instead, it returns "root: null"[have attached a screenShot]

Poll {root: null, selected: 'JavaScript', endpoint: 'http://localhost:3000/poll'} endpoint: "http://localhost:3000/poll" root: null selected: "JavaScript" [[Prototype]]: Object

since it is a null value `

Uncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')
    at new Poll (main.js:6:19)
    at main.js:12:11

` it couldn't read that property...

THIS is the main.js file:`

class Poll {
    constructor(root, title) {
        this.root = root;
        this.selected = sessionStorage.getItem("poll-selected");
        this.endpoint = "http://localhost:3000/poll";
        this.root.insertAdjacentHTML("afterbegin", `
            <div class="poll__title">${ title }</div>
        `);
    }
}

const p = new Poll(
    document.querySelector(".poll"),
    "Which do you prefer?"
);

console.log(p);  

`

THIS is the HTML div block im trying to return:`

 <div class="poll">
        <div class="poll__title">Which do u prefer?</div>
        <div class="poll__option">
            <div class="poll__option-fill"></div>
            <div class="poll__option-info">
                    <span class="poll__label">TypeScript</span>
                    <span class="poll__percentage">21%</span>
            </div>
        </div>
        <div class="poll__option poll__option--selected">
            <div class="poll__option-fill"></div>
            <div class="poll__option-info">
                <span class="poll__label">JavaScript</span>
                <span class="poll__percentage">41%</span>
            </div>
        </div>
    </div>

`

I'm trying to update the "root" value as div.poll instead I'm getting "root: null" root value is returning null