I am trying the add font size on Quill js but the all names is seem ‘normal’

I am using the quill text editor in a javascript. I want to add custom font size and I am do this but all font size’s name are seem ‘normal’.

this is my active code parts:

this part is HTML code for running quill

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>

this part is my configuration

<script>
    const fontSizeArr = ['8px', '9px', '10px', '12px', '14px', '16px', '20px', '24px', '32px'];

    var Size = Quill.import('attributors/style/size');
    Size.whitelist = fontSizeArr;
    Quill.register(Size, true);


    var toolbarOptions = [
        [{ 'font': [] },],
        [{ 'size': fontSizeArr }],
        ['bold', 'italic', 'underline', 'strike']
    ];


    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: toolbarOptions,
        },
        theme: 'snow'
    });
</script>

I tried different usages this time the font size’s name seen but font sizes didn’t change

Code 2:

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>
<script>
const fontSizeArr = [
    { value: '8px', name: '8px' },
    { value: '9px', name: '9px' },
    { value: '10px', name: '10px' },
    { value: '12px', name: '12px' },
    { value: '14px', name: '14px' },
    { value: '16px', name: '16px' },
    { value: '20px', name: '20px' },
    { value: '24px', name: '24px' },
    { value: '32px', name: '32px' }
];

var Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

 var toolbarOptions = [
    [{ 'font': [] },],
    [{ 'size': fontSizeArr.map(size => size.value)}],
    ['bold', 'italic', 'underline', 'strike']
];



 var quill = new Quill('#editor-container', {
        modules: {
            toolbar: toolbarOptions,
        },
        theme: 'snow'
 });


function updateToolbarSizeNames() {
    const sizeSelect = document.querySelector('.ql-size');
    sizeSelect.innerHTML = ''; 

    fontSizeArr.forEach(size => {
        const option = document.createElement('option');
        option.value = size.value; 
        option.innerText = size.name; 
        sizeSelect.appendChild(option);
    });
}

updateToolbarSizeNames();
</script>