Al definir su grupo de optgroup en la cadena, inmediatamente abre y cierra el grupo de opciones, colocando efectivamente cada opción después del grupo de opciones.

 str += `<optgroup label=${categoryTitle}></optgroup>`

Deje el optgroup abierto en la cadena antes mencionada.

Sin embargo, la parte difícil es cerrar la cadena después de que se completen todas las solicitudes de fetch en las subcategorías. Podemos lograr esto con Promise.all y Array#map .

Recorra todas las subcategorías con el map y devuelva Promise de que la fetch devuelve en el bucle. Cuando se hayan realizado todas las solicitudes de fetch , el código continuará hasta el bloque then que sigue a la función Promise.all . En ese bloque, tendrá las identificaciones y los títulos de todas sus subcategorías recopiladas en una matriz. Bucle sobre la matriz para agregar a su cadena.

Después del ciclo, cierre el elemento optgroup .

 fetch(categoriesURL) .then(response => response.json()) .then(data => { data.forEach(category => { let categoryTitle = category.title; str += `<optgroup label=${categoryTitle}>`; Promise.all(category.subcategories.map(sub => { let subcategories_id = sub.subcategories_id; let subcategoriesURL = `INSERT_URL/${subcategories_id}`; return fetch(subcategoriesURL) .then(response => response.json()) .then(({ title }) => ({ title, id: subcategories_id })) })).then(subData => { subData.forEach(({ id, title }) => { str += `<option value=${id}>${title}</option>`; }) str += '</optgroup>'; }); }) select.innerHTML = "<option disabled selected>Select a category</option>" + str; });

Sin embargo, en general, este es un script muy costoso, ya que creará muchas solicitudes. Si tiene algo que decir sobre el backend, le aconsejo que envíe todos los datos en una sola solicitud y cree su lista en función de ese resultado.