title: How to render two arrays in jsx
body: <p>So I have two lists: <code>categories</code> and <code>channels</code> both of them have two objects. Now I want to loop through each of them but the problem is no matter how I loop through them I always end up with two results either the items are displayed 4 times (should be 2) or the nested loop (channel loop) is displaying all of its items on all the categories.</p>
  <pre class="lang-js prettyprint-override"><code>     &lt;div className=&quot;fixed inset-0 m-auto bg-[#2F3136]&quot;&gt;
          &lt;div&gt;
            &lt;h1&gt;{server?.title}&lt;/h1&gt;
            &lt;ArrowDropDownOutlinedIcon /&gt;
          &lt;/div&gt;
  
          {categories?.map((category) =&gt; (
            &lt;div key={category._id}&gt;
              &lt;h1&gt;{category.title}&lt;/h1&gt;
              {channels?.map((channel) =&gt; (
                &lt;h1&gt;{channel.title}&lt;/h1&gt;
              ))}
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
  </code></pre>