Попытка изменить внутренний элемент с помощью элемента get и выдает ошибку TypeError: не удается установить свойство 'innerHTML' равным нулю

Я пытаюсь изменить элемент через получение элемента по идентификатору, и он выдает:

TypeError: Невозможно установить для свойства 'innerHTML' значение NULL.

Мы передаем параметры именно так или у нас есть другие подходы?

Мой код:

const [isOpen, setIsOpen] = useState(false);

const togglePopup = (name='shraweg') => {
    setIsOpen(!isOpen);
    let inner = document.getElementById(name)
    inner.innerHTML=(
        <>
            {
                isOpen && 
                <div className="popup-box">
                    <div className="flex flex-col box gap-1">
                        <div>
                            <p className="font-meduim text-lg">Are you sure you want to kick {" "+player.username+" "} ?</p>
                        </div>
                        <div className="flex flex-row  gap-14 items-center justify-center">
                            <button type="submit" onClick={handleKick} value={player._id}  className="border font-semibold text-lg border-red-300 rounded-xl hover:bg-red-600 px-6">
                                Yes
                            </button>
                            <button onClick={togglePopup}  className="border font-semibold text-lg border-yellow-300 rounded-xl hover:bg-yellow-500 px-6">
                                No
                            </button>
                        </div>
                    </div>
                </div>
            }
        </>
    )
}

Здесь я написал функцию для изменения элементов внутри моего HTML-тега:

return (
<legend className="text-xl mb-5 border-yellow-500 border-l-4 pl-2 mt-10">Team Members</legend>
                    <div className="flex gap-5 flex-col w-full mb-4">
                        {props.team.players.map((player, key) => (
                            <div key={key} className="">
                                <label htmlFor="csgoign" className="flex bg-gray-50 hover:bg-gray-200 p-3 rounded-xl w-full items-center justify-between">
                                    <div className="flex font-medium gap-3">
                                        <img src={"https://robohash.org/"+player.username+"?set=set5"} className="w-12 h-12 rounded-3xl bg-blue-100"/>
                                        <div className="ml-3">
                                            <a href={"http://localhost:3000/userprofile/"+player._id} className="text-2xl w-auto font-semibold hover:text-yellow-600">
                                                {player.username}
                                            </a>
                                            <p  className="text-sm font-normal text-gray-700 font-paragraph">
                                                Member since : {player.join_date}
                                            </p>
                                        </div>           
                                    </div>
                                    {props.user._id == props.team.team_cap && (
                                        <>
                                            {!(player.username == props.user.username) && (
                                                <div id={player.username}>  
                                                    {
                                                        !isOpen && 
                                                        <button type="button" onClick={togglePopup(player.username)} className="border font-semibold text-xl border-red-300 rounded-xl hover:bg-red-600 px-7 py-2">
                                                            Kick
                                                        </button>
                                                    }
                                                    
                                                    
                                                </div>
                                            )}
                                        </>
                                )}
                                </label>
                                
                            </div>
                        ))}
                                                    
                    </div>
)