How to display div based on list onclick

I have list of 3 filters* (ALL, UPCOMING AND SOLDOUT) and I need to display only one div for one list onclick (ListAllItems() to display only itemList div, but hide ListUpcomingItems div, and onClick ListUpcomingItems to display only ListUpcomingItems div and hide others.

<div className='itemFilterSortContainer'><ul className='filter-drops'><li onClick={()=>ListAllItems()}>                                ALL</li><li onClick={()=>ListUpcomingItems()}>                                UPCOMING</li><li onClick={()=>ListSoldOutItems()}>                                SOLD OUT</li></ul></div><div className='itemList'>                        {drops.filter(drop=>drop.releaseDate).map(i => (<Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}><ItemCard                                    item={i}                                    firstLabel='lowest ask'                                    firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}                                    secondLabel='listings'                                    secondValue={i.listingsCount ? i.listingsCount.toString() : ''}                                /></Link>                        ))}</div><div className='ListUpcomingItems'>                        {drops.filter(drop=>drop.releaseDate && drop.listingsCount === 0).map(i => (<Link to={`/marketplace/drops/${i.itemId}`} key={`${i.itemId}`}><ItemCard                                        item={i}                                        firstLabel='lowest ask'                                        firstValue={i.minPrice ? `${numberWithDots(i.minPrice)} $` : ''}                                        secondLabel='listings'                                        secondValue={i.listingsCount ? i.listingsCount.toString() : ''}                                    /></Link>                        ))}</div>