## How can I pass my BMI values accordingly using the `letsCalculateBMI` arrow function?

I have this task where I am to build a BMI calculator. I have followed all the instructions accordingly but I seem to be skipping something. I will appreciate a full code review to find the bug.

index.html

``<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport"            content="width=device-width, initial-scale=1.0" />     <meta http-equiv="X-UA-Compatible" content="ie=edge" />      <title>Mini App</title>      <style>       body {         background-color: #ffffff;       }        div.select {         margin-bottom: 2.5em;       }        div.user-photo {         margin: 1em auto;         height: 150px;         width: 150px;         border-radius: 50%;         overflow: hidden;       }        div.details {         color: #ffffff;          background-color: #6200ee;         font-size: 1.3em;          margin-top: 4em;          padding: 0.5em 1em;          border-radius: 10px;       }        .details p {         margin: 0.3em;       }        div#outcome {         position: absolute;          right: 2.2em;          bottom: 6.5em;          width: 100px;         text-align: center;       }        #outcome h5 {         padding: 1em;          background-color: #ffffff;          border-radius: 10%;          margin: 0;       }        #outcome p {         height: 40px;          color: #ffffff;         border-bottom: 5px solid #ffffff;          font-size: 2em;          margin: 0;          padding: 0.5em 0;       }        #oracle {         margin-top: 2.5em;          border: 1px solid;          width: 100%       }      </style>   </head>   <body>         <button       id="filter-query"       class="mdc-icon-button material-icons"     >       filter_list     </button>      <div class="select">       <select class="select-text">         <option disabled selected>Select User</option>               </select>     </div>      <div class="user-photo">       <img src="https://via.placeholder.com/200" alt="Placeholder" >     </div>      <div class="details mdc-elevation--z3">       <p>         <span class="prop" data-age>Age :</span>         <span class="value" data-age-value>23 years</span>       </p>       <p>         <span class="prop" data-height>Height :</span>         <span class="value" data-height-value>169cm</span>       </p>       <p>         <span class="prop" data-weight>Weight :</span>         <span class="value" data-weight-value>68kg</span>       </p>       <p>         <span class="prop" data-gender>Gender :</span>         <span class="value" data-gender-value>Female</span>       </p>       <p>         <span class="prop" data-country>Country :</span>         <span class="value" data-country-value>Nigerian</span>       </p>     </div>      <button id="oracle" class="mdc-button" onclick="letsCalculateBMI()">       Calculate BMI     </button>     <div id="outcome">       <h5 class="mdc-typography--headline5">         BMI       </h5>       <p class ="bmi-text"></p>     </div>      <script>       const users = [];        const countriesWithLowerBmi = ["Chad", "Sierra Leone", "Mali", "Gambia", "Uganda", "Ghana", "Senegal", "Somalia", "Ivory Coast", "Isreal"];              const featToMeter = 0.3048;        const bmiCountryRatio = 0.82;        const computeBMI = ({weight, height, country}) => {         const heightInMeters = height * featToMeter;         let BMI = weight / (heightInMeters^2);         if (countriesWithLowerBmi.includes(country))           BMI *= bmiCountryRatio;         return Math.round(BMI, 2);       };        const getSelectedUser = (userId) => {         return users.find(({id}) => id === userId);       };        const displaySelectedUser = ({target}) => {         const user = getSelectedUser(target.value);         const properties = Object.keys(user);          properties.forEach(prop => {           const span = document.querySelector(`span[data-\$  {prop}-value]`);             if(span) {               span.textContent= user[prop];                }         })                      }        const letsCalculateBMI = () => {          const value = document.querySelector('.select-text').value;         const user =getSelectedUser(target.value);                const bmi = computeBMI(user);          document.querySelector('.bmi-text').innerHTML = bmi       };        const powerupTheUI = () => {         const button = document.querySelector('#oracle');          const select = document.querySelector('.select-text');          select.addEventListener('change', displaySelectedUser);          button.addEventListener('click',letsCalculateBMI);       };              const displayUsers = (users) => {         users.forEach(user => {         const select = document.querySelector('.select-text');         const option = document.createElement('option');          option.text = user.name;          option.value = user.id;         select.appendChild(option);         });       };         const fetchAndDisplayUsers = () => {         users.push(           {           age: 40,           weight: 75,           height: 6,           country: 'Nigeria',           name: 'Charles Odili',           id: 'dfhb454768DghtF'           },           {           age: 23,           weight: 68,           height: 6,           country: 'Nigeria',           name: 'Simpcy',           id: 'gibb12erish'           }         );          displayUsers(users);       };        const startApp = () => {         powerupTheUI();         fetchAndDisplayUsers();       };        startApp();     </script>   </body> </html> $$```$$ ``