Problema em puxar campo de dropdown (lista de seleção) | Front-end

Preciso de um help rs

Estou criando um forms usando a opção select e options. na hora de salvar as informações eu consigo, no meu banco de dados a informação foi salva corretamente.

O problema está na hora de puxar para editar. O campo vem em branco ou somente com a resposta da primeira option de forma generica. Também na hora de salvar em cima e voltar mantém a opção anterior, somente esse input não muda, meus outros inputs mudam.

Como posso fazer para buscar o resultado exato do select e edita-lo?

Segue abaixo meu código:

import { userService } from '../service/user-service.js'

const catchURL = new URL(window.location)

const id = catchURL.searchParams.get('id')

const inputName = document.querySelector('[data-nome]')
const inputRole = document.querySelector('[data-cargo]')
const inputEmail = document.querySelector('[data-email]')
const inputAreaSelect = document.querySelector('[data-area]')
const inputAreaOptions = inputAreaSelect.children[inputAreaSelect.selectedIndex];
const inputArea = inputAreaOptions.textContent;

// const inputAreaSelect = document.getElementById('area')
// const inputArea = inputAreaSelect.options[inputAreaSelect.selectedIndex].value;

userService.detailsUser(id)
.then( dados => { 
    inputName.value = dados.nome
    inputRole.value = dados.cargo
    inputEmail.value = dados.email
    inputArea = dados.area

})

const tableEdit= document.querySelector('[data-form]')


console.log(inputAreaOptions)

tableEdit.addEventListener('submit', (e) => {
    console.log(tableEdit)
    e.preventDefault()

    userService.updateUser(id, inputName.value, inputRole.value, inputEmail.value, inputArea.value)
    window.location.href = "../../components/actionSuccess-register.html"
})

Tentei assim também:

const inputName = document.querySelector('[data-nome]')
const inputRole = document.querySelector('[data-cargo]')
const inputEmail = document.querySelector('[data-email]')
const inputArea = document.querySelector('[data-area]')

Esse é o HTML, não sei se é ele que está com problema.


                    <div class="newUserArea">
                        <label>Área de atuação</label>
                        <select name="Área" class="areas" data-area id="area">
                            <option class="areaOptions" value="consultoria">Consultoria</option>
                            <option class="areaOptions" value="comercial">Comercial</option>
                            <option class="areaOptions" value="marketing">Marketing</option>
                            <option class="areaOptions" value="t-i">T.I</option>
                        </select>
                    </div>

Aqui meu json, com a info certa salva:

      "nome": "sadvfbg",
      "cargo": "sawdefg",
      "area": "Comercial",
      "email": "awdefgrt@wdfg.com",
      "id": 2

Está muito dificil trabalhar com o options, não deveria ser mais simples por ser um input padrão? hahahha