(js) código funciona, mas o "inverso", não. por quê?

tenho dois códigos, o primeiro é funcional, e o segundo, que na teoria é exatamente o mesmo código, só que "invertido", pois usa !== invés de ==, não funciona. alguém consegue me explicar o porquê?

a ideia do código é receber um número de ingredientes com um prompt, depois os ingredientes também atráves de prompts, e se eles não forem repetidos, armazená-los para retornar o total de ingredientes com um alert no final.

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>
    var ingredientes = [];

    var quantidade = parseInt(prompt("Quantos ingredientes você vai adicionar?"));

    var contador = 1;

    while(contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        if(ingrediente == ingredientes) {

            alert("Ingrediente já selecionado!");

        } else {

            ingredientes.push(ingrediente);

            contador++;

        }
    }

    alert("Ingredientes: " + ingredientes);
</script>

<meta charset="UTF-8">

<h1>Receitas do Yan</h1>

<script>
    var ingredientes = [];

    var quantidade = parseInt(prompt("Quantos ingredientes você vai adicionar?"));

    var contador = 1;

    while(contador <= quantidade) {

        var ingrediente = prompt("Informe o ingrediente " + contador);

        if(ingrediente !== ingredientes) {

            ingredientes.push(ingrediente);

            contador++;

        } else {

            alert("Ingrediente já selecionado!");

        }
    }

    alert("Ingredientes: " + ingredientes);
</script>