.find() в JQuery не присваивает результат?

const template = () => {
    return `
    <div class="dropdown__wrap">
        Test
    </div>
  `
}
class Dropdown{
    constructor(selector) {
    this.$root = $(selector);
    this.$wrap = this.$root.find('.dropdown__wrap'); // тут еще нет его    
    console.log(this.$wrap.length);
    this.render(); // появляется после 
    this.$wrap = this.$root.find('.dropdown__wrap'); // тут есть
    console.log(this.$wrap.length);
  }
    render() {
        this.$root.html(template());
    }
  
    open() {
        this.$wrap.addClass('dropdown__wrap_expanded');
    }
    close() {
        this.$wrap.removeClass('dropdown__wrap_expanded');
    }
}
const dropdown = new Dropdown("#dropdown");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropdown"></div>