Can't make wb-title style change on focused

[techniumOSProjects]

1. I placed a border on wb-title that changes color and other attributes when the window focuses and blurs but it gets stuck on either the focused state if I try using wb-title:window-inactive or wb-title:not(.focus)...
   I'm using version 1.5.0. of react-winbox. If it's an issue with how I'm implementing it, please show what my issue is. Thank you.

2. Also resize doesn't seem to be working once I implement with this style. What am I doing wrong?

Here is the css:

.wb-min {
display: none
}
.wb-full {
display: none
}
.wb-max {
display: none
}
.wb-close {
display: none
}
.winbox.modal:after {
background: #0d1117;
opacity: 0.5;
animation: none;
}
.wb-title.focus { /*title never ends up using this style*/
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background: #001481;
color: white;
font-weight: bold;
text-align: center;
margin: 1px;
outline: solid 1px white;
border-bottom: solid 1px black;
}
.winbox.focus { /*works*/
position: absolute;
background: white;
color: black;
font-weight: bold;
outline: solid 1px black;
border: solid 4px #001481;
}
.wb-title:not(.focus) { /*title stuck to this style regardless if window is focused or not.*/
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
background: #c1c1c1;
color: black;
font-weight: bold;
text-align: center;
border: solid 1px black;
}
.winbox:not(.focus) { /*works*/
position: absolute;
background: white;
color: black;
font-weight: bold;
outline: solid 1px black;
border: solid 4px #c1c1c1;
padding: 1px black;
}
.wb-body:not(.focus) {
outline: solid 1px black;
margin-left: 1px;
margin-bottom: 1px;
margin-right: 1px;
}

Here is the window implementation...

<WinBox noResize="false" id={id} title={props.title} x={props.x} y={props.y} width={props.w} height={props.h} modal={props.modal}><div className="title"></div>{props.children}</WinBox>