如何在反应中重新加载条件渲染？

Question

    <div className="confessions-container">
        <div className="search-confession">
            <form className="search-form">
                <div className="form-control">
                        <label htmlFor="categories">Category</label>
                        <select name="categories" ref={refCategory} onChange={() => setCategory(refCategory.current.value)}>

                            <option value="">Select Category</option>
                            {categories.map((category) => {
                                return (
                                    <option value={category}>{category}</option>
                                )
                            })}
                        </select>
                    </div>
                    <div className="form-control search">
                        <input type="text" name="title" ref={refSearch}/>
                        <button className="btn-search">Search</button>
                    </div>
            </form>
        </div>


        {category ? <ConfessionByCategory category={category} /> :  <AllConfessions />}
        
        

    </div>

如果我第一次更改类别（来自选择），则条件渲染运行。但如果我更改为不同的类别，它就不会重新渲染