Unable to select drop down list in testcafe

I am new to testcafe and JavaScript and unable to select drop down list by select element id. Above is my html file

    <div class="form-group col-sm-12 pl-4 pr-4 w-100">
   <label for="states">Names of state </label>
   <select multiple="" id="states" class="form-control select2-hidden-accessible" label="Names of state" inputtype="multiselect" required="" options="[object Object]" name="states" tabindex="-1" aria-hidden="true">
    <option value="1">Goa</option>
    <option value="2">Punjab</option>
    <option value="3">Maharshtra</option>
    </div>

Here is my js code

test('ngo profile',async t=> {
    const selectStates= Selector('#states')
    const selectOption=selectStates.find('option');
    .click(selectStates)
    .click(selectOption.withText('Punjab'))
}

Its not able to even click on drop down button I am getting error "The element that matches the specified selector is not visible".