使用React中的条件在单独的组件中设置元素的样式

在我的react应用程序中，当数组的长度达到5时，我要显示一个隐藏的横幅。但是看起来我试图在呈现元素之前先获取它。我收到有关获取未定义元素样式的错误。

此函数必须更改标题元素的css并使它可见。

  showBanner() {
            let banner = document.getElementsByClassName('overlay')[0]
            banner.style.cssText = "visibility: visible;opacity: 1;"
        }

我想仅在满足条件的情况下呈现我的弹出组件。

render() {
        if (this.props.awarded) {
            if (this.props.awarded.length === 5) {
                this.showBanner()
                return (
                    <>
                        <h1 id="awardLabel">5 movies</h1>
                        <div id="movieList">
                            {this.props.awarded.map((movie) => {
                                return (
                                    <div className="awardHolder" key={movie.imdbID}>
                                        <div className="awardImgHolder"  >
                                            <img src={movie.Poster} alt={movie.Title}></img>
                                        </div>
                                        <div className="awardMovieInfo">
                                            <p>{movie.Title}</p>
                                            <p>year {movie.Year}</p>
                                        </div>
                                        <div className="withdrawButton" onClick={(e) => this.deleteMovie(e, movie)}> WITHDRAW </div>
                                    </div>
                                )
                            })}
                        </div>
                        <Popup />
                    </>
                )
            } else { ...

这是我的横幅结构。

<div id="popup1" className="overlay">
                <div className="popup">
                    <h2>Here i am</h2>
                    <a className="close" href="#">&times;</a>
                    <div className="content">
                        <p>Congratulations. You've nominated 5 movies.</p>
                        <button onClick={this.closeBanner}>Try again</button>
                    </div>
                </div>
            </div>

这是我的banner元素的css。

.overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

如何使用条件来动态更改元素的样式以渲染该元素？