Conditionally rendering options within a second select field based on the value of the first

Hey guys, wondering how to go about this.

Basically I'd like to have two select fields, where the options in the second depend on the first. Let's say in the first I'm selecting countries and in the second - cities.

I can add

to the second field, but I'm wondering if it's possible to add condition to the option itself within that field.

With the current setup, I'll need to have a new

field for each option from the first field, rather than keeping the select field and have dynamic options. It'll result in this:

,

,

,

, etc. Ofc that's just an example and thankfully I'm not doing THAT. 😄 But I'd like to keep only

.

I could always build my own component as well, I guess. But wondering if there's something I'm missing. Thanks!

I see, thanks for confirming. I guess I'll have to do it with a custom component. 🙂