Radio buttons behaviour issue in Next.JS

Question

I would like to share this problem, hoping someone either points out a solution or notices some mistake I may be making.

In a NextJS app, I have a box of 3 radio buttons where I find a weirdness in the behavior. Here is the code to reproduce the problem.

First I set an app using this command:

% npx create-next-app@latest
    I name the app mytestapp
    .....
% cd mytestapp

Here I set these files:

app/page.tsx

import RadioDisplayMng from './components/RadioDisplayMng'

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
      <RadioDisplayMng />
      </div>
    </main>
  )
}

app/components/RadioDisplayMng.tsx

'use client'

import React, {useEffect,useState} from "react";
import RadioChoice from "./RadioChoice";
import "./RadioDisplayMng.css";


export default function SentenceDisplayMng() {
    const [choiceType, setChoiceType] = useState(1)
    const [typeChecks, setTypeChecks] = useState([true,false,false])

    useEffect(() => {
        console.log('NOW INTO --useEffect (choiceType:'+choiceType+')--')
        switch (choiceType) {
            case 1:
                setTypeChecks([true,false,false])
                break;
            case 2:
                setTypeChecks([false,true,false])
                break;
            case 3:
                setTypeChecks([false,false,true])
                break;
            default:
                console.log('Unexpected case in useEffect='+choiceType)
                break;
        }
    }, [choiceType])

    return <div>
    <RadioChoice
            actionFunc={(v) => setChoiceType(v)} 
            radChecks={typeChecks} />
    </div>
} /* End of SentenceDisplayMng */

app/components/RadioChoice.tsx

import React, {useState,ChangeEvent} from "react";
import "./RadioChoice.css";

export default function RadioChoice(
    {radChecks,actionFunc=()=>{}}:
    {
        radChecks: boolean[]
        actionFunc?: (v:number) => void
    }) {


    function radioSelect(evt:ChangeEvent<HTMLInputElement>) {
        console.log('radioSelect -> '+evt.target.value)
        if (typeof actionFunc===undefined) return
        actionFunc(parseInt(evt.target.value))
        console.log('actionFunc called!')
    } /* End of radioSelect */


    return (
        <div className='xrcTpSlctBlk'>
            <label className='xrcTpLbl'>
                Choose among the following
            </label>
            <div className='xrcTpRdbnBlk'>
                <div className='rdbBlk'>
                    <div className='rdbtn'>
                        <input type='radio' name='exoTp' value={1}
                            checked={radChecks[0]}
                            onChange={e=>radioSelect(e)} />
                    </div>
                    <div className='trsTpLbl'>Choice One</div>
                </div>
                <div className='rdbBlk'>
                    <div className='rdbtn'>
                        <input type='radio' name='exoTp' value={2}
                            checked={radChecks[1]}
                            onChange={e=>radioSelect(e)} />
                    </div>
                    <div className='trsTpLbl'>Choice Two</div>
                </div>
                <div className='rdbBlk'>
                    <div className='rdbtn'>
                        <input type='radio' name='exoTp' value={3}
                            checked={radChecks[2]}
                            onChange={e=>radioSelect(e)} />
                    </div>
                    <div className='trsTpLbl'>Choice Three</div>
                </div>
            </div>
        </div>
    )
}

At this point the app is ready to test and we can see the issue I have in mind.

While running the app (after launching with "npm run dev") it is necessary to open the browser web developers tool window (I am using Firefox). We look at the app in the browser (at: http://localhost:3000/) and play clicking the 3 radio buttons.

Here is what I notice, when clicking in this order 1,2,3,1,2,3,1,2,3,... for ever; all seems OK. The same happens when clicking in this order 3,2,1,3,2,1,3,2,1,... for ever. The expected function calls (to radioSelect) appear in the web developers tool console.

Things go wrong when breaking the regular order above.

Choose on button and eliminate it from the hits, for example: 1,2,3,1,2,3,1,2,1,2,1,2,1,2,1,2 From the time we stop hitting 3 the calls to radioSelect cease to appear in the web developers tool console. Why is that? Could it be a bug on the Next JS side and its handling of radio buttons? Or did I miss something?

Any relevant hint will be more than welcome.