Interactive card details form using React

I totally underestimated the scope of this project. I thought it was a quick ~4-6h project but ended up to be more than 10h of work for me. Well, now I know.

Is there any good way to give 'border-images' a 'border-radius'-like rounded corner using react? In vanilla JS I would probably create a new absolute element using the position of the element I want the background for, but in React getting an element from the DOM to get it's position is an outside effect, which means you need state to check if an input is active.. that just seems like unnecessary work and re-renders for slightly rounded corners.

Any advice is highly appreciated. Thanks!