即使使用react挂钩更新了状态变量后，页面也不会更新/重新呈现

Question

这是我需要新的歌手列表的地方：

<div className="d-flex justify-content-center w-50">
    {addedArtists}
    <div className={`mt-4 mr-2 d-flex ${styles.circle}`}>
       <span className={`m-auto`}>ADD +</span>
    </div>
</div>

这是单击“跟随”按钮时调用的功能

function addArtist(event) {
        addedArtists.push(event.target.value)
        updateArtists(addedArtists);

        ArtistHtml.push(<div key={event.target.value} className={`mt-4 mr-2 d-flex ${styles.circle}`}><span className={`m-auto`}>event.target.value</span></div>)
        updateArtistHtml(ArtistHtml)
}

即使显示ArtistHtml状态已更新，但html仍未反映出更改，我什至尝试这样做

{addedArtists.map(item => (
    <div key={item} className={`mt-4 mr-2 d-flex ${styles.circle}`}><span className={`m-auto`}>{item}</span></div>
))}

仍然没有运气，也许这是一个愚蠢的错误。有人可以帮我吗？