How to find out the number of a div element inside a div?

Question

React

For example, there is such a JSX element, you need to number each 'item-title' according to the hierarchy of its location inside the main div. Now I wrote it manually, but this is not the correct option, because the view depends on the background.

<div className='settings' id='settings'>
            <div className='settings_item'>
                <h3 className='item-title'>1. Почта </h3>
                <div className='item_content'>
                    ..content
                </div>
            </div>
           <div className='settings_item'>
                <h3 className='item-title'>2.Телефон </h3>
                <div className='item_content'>
                    ..content
                </div>
            </div>
</div>

I tried this, but the code doesn't work.

const settingContent = document.getElementById('settings')

    useEffect(() => {
        settingContent?.childNodes.forEach((item, key) => {
            const div = document.createElement('div')
            div.innerHTML = `${key}`
            console.log(item.childNodes.item(0))
            item.childNodes.item(0).appendChild(div)
        } )
    }, [])

Answer 1

Can be done without js, only with styles using pseudo-elements
https://jsfiddle.net/oygt1c8s/1/