单选按钮点击其他组件后无法保持选中状态的问题求助

各位大佬好，我最近在做一个带优先级选择的任务添加功能，遇到了个头疼的问题：自定义样式的单选按钮，点击选中后只要一点页面上的其他组件，选中状态就直接消失了，根本没法保持住，求大家帮忙看看问题出在哪！

我用Bootstrap Icons做了单选按钮的自定义样式，通过label和单选按钮关联，写的HTML代码如下（后面还有几个类似的优先级选项，就不全贴了）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

<input class="add_task_radio" type="radio" name="prior" id="prior-2" value="2">
<label class="add_task_radio_icon" name="prior" for="prior-2" tabindex="1">
<i class="bi bi-check-circle text-light yellow"></i>
<i class="bi bi-circle text-light yellow"></i>
</label>
<input class="add_task_radio" type="radio" name="prior" id="prior-2" value="2">
<label class="add_task_radio_icon" name="prior" for="prior-2" tabindex="1">
<i class="bi bi-check-circle text-light yellow"></i>
<i class="bi bi-circle text-light yellow"></i>
</label>
...

目前的情况是，点击label里的图标时，单选按钮能正常显示选中状态，但只要我点击页面上的输入框、其他按钮或者任何别的组件，这个选中状态就立刻消失了，甚至刷新页面后也回到未选中的初始状态。我反复检查了关联的CSS样式，没发现明显的冲突，实在找不到问题根源了，有没有大佬能给我指条明路？

备注：内容来源于stack exchange，提问作者Łukasz Trześniewski