onclick stay focused untill click another component from the area - html

Question

I try to make a chat-app, now i'm trying to implement the cheats and when user click on one chat, styles must change and remain until the user focus it's gonna to another chat
In my example let's assume someone clicked on User 2. The chat changed style and now have the style that should have when someone open that chat. How can i make the style to stay like that until someone open another chat? I didn't find any css propriety or some react tricks.
.userChatBubbles {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5%;
width: 100%;
height: 100%;
}
.allOfMessage {
width: 100%;
height: 20%;
display: flex;
flex-direction: row;
align-items: center;
margin-left: 13%;
margin-bottom: 1px;
}
.messageBubleNEWMSG {
display: flex;
flex-direction: row;
align-items: center;
width: 90%;
height: 80%;
font-size: 15px;
background: #1d1335;
opacity: 1;
border-radius: 2%;
padding-left: 4%;
margin-right: 10%;
font-family: 'Roboto', sans-serif;
}
.messageBuble {
display: flex;
flex-direction: row;
align-items: center;
width: 90%;
height: 80%;
font-family: 'Roboto', sans-serif;
font-size: 15px;
padding-left: 4%;
margin-right: 10%;
}
.photo {
background: green;
width: 45px;
height: 45px;
margin-top: 2%;
border-radius: 10%;
margin-right: 6%;
}
.messageBubleNEWMSG.personNameAndMsg.personName {
color: green !important;
margin-top: 200%;
}
.messageBuble .personNameAndMsg h3 {
color: #c2b4da;
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 15px;
}
.messageBuble .personNameAndMsg p {
color: #514b64;
margin-top: -8%;
/* margin-top: 1%; */
font-family: 'Roboto', sans-serif;
font-weight: 200;
}
.messageBubleNEWMSG .personNameAndMsg h3 {
color: #e1dbed;
font-family: 'Roboto', sans-serif;
font-weight: 200;
font-size: 15px;
}
.messageBubleNEWMSG .personNameAndMsg p {
color: #736f83;
margin-top: -8%;
font-family: 'Roboto', sans-serif;
font-weight: 500;
/* margin-top: 1%; */
}
.messageTime {
margin-left: auto;
color: #6e6d73;
}
<div class='userChatBubbles'>
<div class='allOfMessage'>
<div class='messageBuble'>
<div class='photo'></div>
<div class='personNameAndMsg'>
<h3>User</h3>
<p> When can we hangout?</p>
</div>
<div class='messageTime'>6m</div>
</div>
</div>
<div class='allOfMessage'>
<div class='messageBubleNEWMSG'>
<div class='photo'></div>
<div class='personNameAndMsg'>
<h3>User 2</h3>
<p> When can we hang out?</p>
</div>
<div class='messageTime'>6m</div>
</div>
</div>
<div class='allOfMessage'>
<div class='messageBuble'>
<div class='photo'></div>
<div class='personNameAndMsg'>
<h3>User 3</h3>
<p> When can we hangout?</p>
</div>
<div class='messageTime'>6m</div>
</div>
</div>
</div>