How to set selectedItem in a combobox

I have a combobox component that is being used as an ITEMRENDERER. Here is it's dataProvider data:

<mx:Model id="modelGender">
      <gender>
            <sex index="M" text="Male"/>
            <sex index="F" text="Female"/>
      </gender>
</mx:Model>

Here is the code for this component:

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml"
      dataProvider="{dp}"
      labelField="text"
      change="changeHandler(event)"
      creationComplete="init()">
      
      <mx:Script>
            <![CDATA[
                  import mx.collections.ArrayCollection;
                  
                  [Bindable]
                  public var dp:ArrayCollection;
                  
                  private function init():void
                  {
                        for (var i:int=0; i<dp.length; i++)
                        {
trace(data.index, data.text); // ****** 'data' is still undefined here
                              if (data.index == dp[i].index)
                                    this.selectedIndex = i;
                        }
                  }
            ]]>
      </mx:Script>
      
</mx:ComboBox>

I am using the 'creationComplete" event within the component to set the selectedIndex property of the combobox, but the problem is that the keyword 'data' is still undefined at this point.

So how can I pre-set the selectedItem of the combobox in this scenario?