Laugh is, I think CSS in JS serves a purpose, I'm just disgusted by the crazy hoops I see people jump through to do it. It's almost like JS programmers are blissfully unaware of what a trailing slash does inside strings, or fail to realize the new-fangled backtick strings make it even easier.
var newSheet = document.head.appendChild(document.createElement("style"));
newSheet.textContent = "Your stylesheet here";
Really so flipping hard we need 2k or more in a library to do it? It's not flipping rocket science.
As to the purpose, it's pretty obvious. When the CSS only applies to the scripting, or you want it when a scripting event -- like a "loader" -- is waiting for the rest of the document -- like the main stylesheet -- to finish loading.
But like everything else, people just throw it at projects willy-nilly without the legitimate reason to do so.
As to React, again that it is 100% client-side DOM construction it lacks graceful degradation for when scripting is off / blocked/ unavailable. That ALONE should make it a no-go on anything that's going to run in a browser.
Though much of what I said applies more to frameworks in general, not just React. Even so much of it does just because they advocate bad practices. Don't believe me, look at the markup for any of the examples people are supposed to be learning from.
Though HTML/CSS frameworks are far, far worse in this regard. You can view-source ANY official example code for bootcrap or tailwind, and see plain as day that not only are they practicing the bleeding edge of 1997 site-building methodologies thanks to using presentational classes to recreate the worst of HTML 3.2 / 4 Tranny. The people creating and maintaining these systems have no business writing a single blasted line of HTML much less the unmitigated GALL to tell others how to do so.
And don't even get me started about the utter ****-show of ignorance, incompetence, and ineptitude that is React-UI.