Doesn't work inside native `dialog` element

[kamalciirs]

Code

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<select>
    <option value hidden>Select one</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<button onclick="document.querySelector('dialog').showModal()">Show dialog</button>

<dialog style="width: 500px; height: 500px;">
    <select>
        <option value hidden>Select one</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</dialog>

<script>
    $(document).ready(() => {
        $("select").select2()
    })
</script>