title: Settings.js:168 Uncaught TypeError: Cannot destructure property 'component' of 'templates.find(...)' as it is undefined
body: <p>Hi guys  I am struggling to solve this error, here is my code</p>
  <pre><code> import TemplateOne from &quot;./Template_1&quot;;
        ..........
       
        const templates = [
         {
          title: &quot;TemplateOne&quot;,
          component: TemplateOne,
          }
        ]
      
        const { component: SelectedComponent, title } = 
         templates.find(function (Component,idx){
         if (Component.id === templatesID.stid) {
            return true;
         }
          return false;
        });
  </code></pre>
  <p>And I am displaying the selected component like this :
  <code>&lt;SelectedComponent /&gt;</code></p>
  <p><a href="https://i.stack.imgur.com/q1oLe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q1oLe.png" alt="enter image description here" /></a></p>
  <p><strong>Note I have multiple templates</strong></p>
  <p>What is wrong here?</p>