Flex Panel AS3

I am trying to dynamically change a panel to a different panel on mouseDown but it isn’t working as I though it should. Here’s the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.containers.Panel;
        
        public function UpdatePanel():void {
            var newPanel1:Panel = new Panel();
            newPanel1.title = "New Panel 1";
            newPanel1.percentWidth = 100;
            newPanel1.percentHeight = 100;
            panel1 = newPanel1;
        }
    ]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
    <mx:VDividedBox width="100%" height="100%">
        <mx:Panel id="panel1" width="100%" height="100%"/>
        <mx:Panel id="panel2" width="100%" height="100%"/>
    </mx:VDividedBox>
    
    <mx:Button label="Update" mouseDown="UpdatePanel()"/>        
</mx:VBox>

</mx:WindowedApplication>

I don’t get any errors but panel1 doesn’t update when the button is clicked. This must be possible right? If anyone can help with this I would appreciate it.