check the radio button when click on the li using javascript

I have radio button

Html code:

<input type="radio" class="first" name="bright" checked>
<input type="radio" class="second" name="bright" >
<input type="radio" class="third" name="bright">
<input type="radio" class="four" name="bright">

And i have a nav bar

Html code

<ul class="nav">

<li class="st st1 active" data-cont="first">
<h2 class="inner">وزارة الاستثمار</h2>
</li>
<li class="st st2" data-cont="second">
<h2 class="inner">وزارة التجارة</h2>
</li>
<li class="st st3" data-cont="third">
<h2 class="inner">جهات حكومية اخرى</h2>
</li>
<li class="st st4" data-cont="four">
<h2 class="inner">مكتب هندسي</h2>
</li>
 </ul>

These 2 are conected with the data-cont that have the class of the radio button

I want when i click on the li the correct radio button be checked using javascript

I tried to make it using this code in JavaScript

let radio = document.querySelectorAll("input");
let radioArray = Array.from(radio);
let tabs = document.querySelectorAll(".nav li");
let tabsArray = Array.from(tabs);


tabsArray.forEach((ele) => {
    ele.addEventListener("click", function (e) {
        tabsArray.forEach((ele) => {
            ele.classList.remove("active");
        });
        e.currentTarget.classList.add("active");
       document.querySelector(e.currentTarget.dataset.cont).checked = true;
    });
});

I try to remove the active class from li and put it on the li where i click then i want the radio button be checked

Any body can help me on this?