I have 2 dropdown boxes State and Lake. I want the user to be able to select the state and only the lakes that are applicable are shown in the 2nd dropdown box. The state dropdown works; however, the 2nd dropdown still shows all lakes in the database?

import wixData from 'wix-data';

$w.onReady(function () {
    uniqueDropDown1();
});

function uniqueDropDown1 (){
    wixData.query("Import791")
        .limit(1000) 
      .find()
      .then(results => {
           const uniqueTitles = getUniqueTitles(results.items); 
           $w("#stateDropdown").options = buildOptions(uniqueTitles); 
      });
  function getUniqueTitles(items) {
        const titlesOnly = items.map(item => item.state);
     return [...new Set(titlesOnly)];
    }
    function buildOptions(uniqueList) { 
        return uniqueList.map(curr => {
            return {label:curr, value:curr}; 
        });
    }
 }
 export function dropdown1_change(event) {
uniqueDropDown2(); 
 $w("#lakeDropdown").enable();
function uniqueDropDown2 (){
    wixData.query("Import791")
        .contains("state", $w("#stateDropdown").value)
        .limit(1000) 
      .find()
      .then(results => {
           const uniqueTitles = getUniqueTitles(results.items); 
           $w("#lakeDropdown").options = buildOptions(uniqueTitles);
      });

  function getUniqueTitles(items) {
        const titlesOnly = items.map(item => item.lakeName);
     return [...new Set(titlesOnly)];
    }
    function buildOptions(uniqueList) { 
        return uniqueList.map(curr => {
            return {label:curr, value:curr}; 
        });
    }
}
}

Anyone know where I’m going wrong?