A new state inside another state

Hi everyone,

I wanna design a multiple step state over a button (search button):
1. Default state:

2. Hover state:

3. Open state (you tap the button and it opens):

4. Active state (you tap the search area and it transforms to ready to type field with blinking cursor).

At this step I have to make the white box inside the search box (you can see in state 3 above) a new component so I'll be able to add new states to this area. But I can just make a new component with a default state and another state is not possible to be added.

Is there any feasible solution to this?

Thank you in advance.