The behavior is if you select a state it selects all the cities in that dropdown. But in this scenario if user selects USA shouldn't all the states be disabled/gray rather than selecting all the states? I say this because if all the states/cities are chosen and they change there mind they would have to unselect them all.
No, they should be enabled.
What you're using here is a tree view pattern.
A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children may be expanded or collapsed to show or hide the children. For example, in a file system navigator that uses a tree view to display folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both. This is a very common pattern (just take a look at your own operating system's file manager) that most users will recognize at first glance.
The idea is that you can quickly select and deselect items or groups of items with minimal effort, while easily understanding what happens to the selection
So the convention is to use a sign, check mark or similar for each individual item selected or for each group for which all items are selected.
However, if not all elements of a group are selected, a square is usually displayed in the checkbox (see image below)
Now, to address your specific example, let us look at some use cases:
The important thing is: users can use this flow in increasing (they start adding selected items) or decreasing (they select everything and then filter the items they do not want) ways. To do this, the elements must always be enabled so that users can interact in any way they want.
Would not deselecting "USA" deselect all states and cities?
However, when selecting "USA", selecting all states and cities is overwhelming.
Rather than automatically select sub options, provide a note stating how many states and cities, or cities if selecting a state, are selected:
At a certain level of complexity, it becomes difficult for the user to control what they want to select in a single dropdown. If there are potentially thousands of choices at the city level, a multiselect dropdown wouldn't be the correct pattern.
The right pattern depends on your use cases. What is your user trying to accomplish? Do they want to select a combination of large regions and one-off cities? Do they want to search for particular cities and only target those? Are they working more with an exclusion pattern (select all cities EXCEPT Dallas, which will have its own unique criteria)?
I would suggest you write out your user stories and design optimal workflows vs. trying to find a single component that can accommodate all items.
