How do i use a variable in React Hook Form for the error

I have three checkboxes and depending on the checked input i show an extra input, so i made an object with some info to fill out the needed spots.

{opciones.map((opcion) => (
            <>
                {
                    watch(opcion.titulo_checked) && (
                        <div className='mt-3 '>
                            <div className='flex'>
                                <label htmlFor={opcion.input_mostrar} className="mb-4 font-semibold text-gray-900 dark:text-white">Nombre del programa en {opcion.idioma} </label>
                                <span className='flex items-center ml-1 -mt-3 text-xs text-red-600'>  <FaAsterisk /> </span>
                            </div>
                            <input {...register(opcion.input_mostrar, {

                                required: {
                                    value: true,
                                    message: "Campo nombre es obligatorio"
                                },
                                minLength: {
                                    value: 5,
                                    message: "Este campo debería de tener al menos 5 carácteres"
                                }
                            })} type="text" id={opcion.input_mostrar}
                                className="mt-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Introduce el nombre de la página" minLength={5}
                            />
                            {errors.nombre_pagina &&

                                <span className='text-red-500 text-sm'>

                                    {errors.nombre_pagina.message}
                                </span>
                            }
                        </div>
                    )
                }
            </>
        ))}

I’m not sure how to change from {errors.nombre_pagina} to {errors.opcion.input_mostrar}
Right now it works fine but the errors are not displayed obviously because i haven’t changed the last part. Not really sure how, i tried errors.{opcion.input_mostrar} or simply errors.opcion.input_mostrar but none of them work obv lol
PD: nombre_pagina is the same as opcion.input_mostrar but i think it’s giving error because of the dot after opcion.

>Solution :

I’m not sure how to change from {errors.nombre_pagina} to
{errors.opcion.input_mostrar} Right now it works fine but the errors
are not displayed obviously because i haven’t changed the last part.
Not really sure how, i tried errors.{opcion.input_mostrar} or simply
errors.opcion.input_mostrar but none of them work obv

You can easily do that by changing your code slightly , here is how you can do that.

{errors[opcion.input_mostrar] && (
    <span className='text-red-500 text-sm'>
        {errors[opcion.input_mostrar].message}
    </span>
)}