Como fazer select one menu renderizar baseado em outro[JSF]

Programação
#1

Boa tarde, eu tenho dois selects one menu, um carrega os estados e outro eu quero carregar as cidades daquele estado em tempo de execução, só que não consigo, ele não carrega nem a página quando tento usar <p:ajax> ou <f:ajax>, alguém pode me dar uma mão:

Bean

 private EstadoDAO edao = new EstadoDAO();
private List<Estado> estados;
private int estadoSelecionado;

private CidadeDAO cdao = new CidadeDAO();
private List<Cidade> cidades;
private int cidadeSelecionada;


public pessoaMB() {
    estados = edao.MostrarEstados();
    
}

public void atualizarCidadesporEstado() {
    cidades = cdao.MostrarCidadesporEstado(estadoSelecionado);
}

Minha tela:

  <div class="ui-g-12">
                        <h:selectOneMenu id="estado" value="#{pessoaMB.estadoSelecionado}"  >
                            <f:selectItems value="#{pessoaMB.estados}" var="estado" itemValue="#{estado.idEstado}" itemLabel="#{estado.nomeEstado}"/>
                        </h:selectOneMenu>
                        <p:ajax update="cidade" listener="#{pessoaMB.atualizarCidadesporEstado()}"/>  
                    </div>

                    <div class="ui-g-12">
                        <p:outputLabel  value="Selecione sua cidade:*"/>
                    </div>
                    <div class="ui-g-12">
                        <h:selectOneMenu id="cidade" value="#{pessoaMB.cidadeSelecionada}" >
                            <f:selectItems value="#{pessoaMB.cidades}" var="cidade" itemValue="#{cidade.idCidade}" itemLabel="#{cidade.nomeCidade}"/>
                        </h:selectOneMenu>
                    </div>

Os métodos DAO funcionam perfeitamente, meu problema é quando tento aplicar um ajax, ele fica com a página assim:
inserir a descrição da imagem aqui

Muito provavelmente minha lógica está errada, já usei ajax com radio button em outros formulários e funcionou perfeitamente, se alguém puder dar um norte eu agradeço.

*Já vi os exemplos de select com rendered, nenhum funcionou até o momento comigo.

#2

@Slyfer você não pode usar o <p:selectOneMenu> ao invés do <h:selectOneMenu>

a tag <p:ajax> ou <f:ajax> sempre deve estar dentro de um componente que aceita eventos, no seu caso está dentro da div, o que não é aceito.

<div class="ui-g-12">
    <h:selectOneMenu id="estado" value="#{pessoaMB.estadoSelecionado}"  >
       <f:selectItems value="#{pessoaMB.estados}" var="estado" itemValue="#{estado.idEstado}" itemLabel="#{estado.nomeEstado}"/>
    </h:selectOneMenu>
    <p:ajax update="cidade" listener="#{pessoaMB.atualizarCidadesporEstado()}"/>  
</div>

Deveria ser assim:

<div class="ui-g-12">
    <h:selectOneMenu id="estado" value="#{pessoaMB.estadoSelecionado}"  >
       <f:selectItems value="#{pessoaMB.estados}" var="estado" itemValue="#{estado.idEstado}" itemLabel="#{estado.nomeEstado}"/>
       <p:ajax update="cidade" listener="#{pessoaMB.atualizarCidadesporEstado()}"/>
    </h:selectOneMenu>
</div>
#3

Fiz isso, deu bem certo, obrigado