How to use movieClip symbols in a movieClip symbol

I asked a question about the mismatch of mouse position and drawing coordinates on a responsive screen last time and was happy to hear the quick answer (divided by stage scale).

I put a button symbol and a movie clip symbol inside the movie clip symbol. Button symbols respond to mouse events, but movie clip symbols do not.

app.on("mousedown", function(e)
{
target = e.target;
if (target == app.redButton) //Button symbol work
{
app.config.color = "#FF0000";
app.erase = false;
app.colorHighlight.x = target.x
}
else if(target == app.greenMovieClip) //MovieClip symbol not work
{
app.greenMovieClip.alpha = 0.3;
}
});

So when I hover the mouse over the symbol, I print the symbol's name on the console.

app.on( "mouseover", function(e)

{
target = e.target;
console.log(target.name);
});

The name of the button symbol is displayed, but the movie clip symbol is null.

I want to know how to put a movie clip inside a movie clip symbol and make it react to mouse events like a button symbol.

https://kong.or.kr/painting.html
The file I practiced is on the link above. Three green circles in the center are the movie clip symbols.