title: NextJS bug: Component props are undefined when building the project (everything works fine on dev mode)
body: <p>I have this component that works totally fine on dev mode but when building it tells me that the <code>open</code> prop is <code>undefined</code> even though it works fine and when I <code>console.log</code> it on localhost I get the correct result.</p>
  <pre><code>const FAQ = ({ faq, index, toggleFAQ }) =&gt; {
    return (
      &lt;div
        className={`${Styles.faq} ${faq.open ? Styles.open : &quot;&quot;}`}
        key={index}
        onClick={() =&gt; toggleFAQ(index)}&gt;
        &lt;div className={Styles.question}&gt;
          &lt;div className='flex justify-between'&gt;
            &lt;div style={{ width: &quot;90%&quot; }}&gt;
              &lt;span&gt;{faq.question}&lt;/span&gt;
            &lt;/div&gt;
            &lt;div className='m-auto ml-24'&gt;
              {faq.open ? (
                &lt;img src='faq1.svg' alt='' srcSet='' /&gt;
              ) : (
                &lt;img src='faq2.svg' alt='' srcSet='' /&gt;
              )}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;{&quot; &quot;}
        &lt;div className={Styles.answer}&gt;
          &lt;span&gt;{faq.answer}&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Where I'm passing the prop:</p>
  <pre><code>const FAQpage = () =&gt; {
    const [faqs, setfaqs] = useState([
      {
        question: &quot;1&quot;,answer:&quot;2&quot;,open: true,
      },
      {
        question: &quot;1&quot;,answer:&quot;2&quot;,open: false,
      },
      {
        question:&quot;1&quot;,answer:&quot;2&quot;,open: false,
      },
      {
        question:&quot;1&quot;,answer:&quot;2&quot;,open: false,
      },
      {
        question:&quot;1&quot;,answer:&quot;2&quot;,open: false,
      },
      {
        question:&quot;1&quot;,answer:&quot;2&quot;,open: false,
      },
      {
        question:&quot;1&quot;,answer:&quot;2&quot;,open: false,
      },
    ]);
  
    const toggleFAQ = (index) =&gt; {
      setfaqs(
        faqs.map((faq, i) =&gt; {
          if (i === index) {
            faq.open = !faq.open;
          } else {
            faq.open = false;
          }
  
          return faq;
        })
      );
    };
  
    return (
      &lt;div&gt;
        &lt;h1 className={Styles.title}&gt;FAQ&lt;/h1&gt;
        &lt;div className={Styles.faqs}&gt;
          {faqs &amp;&amp;
            faqs.map((faq, i) =&gt; (
              &lt;FAQ faq={faq} key={i} index={i} toggleFAQ={toggleFAQ} /&gt;
            ))}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>Error running <code>next build</code>:</p>
  <pre><code>info - Creating an optimized production build info - Compiled successfully 
  info - Collecting page data [= ] info - Generating static pages (0/51) 
  Error occurred prerendering page &quot;/components/FAQ&quot;. Read more: err.sh/next.js/prerender-error 
  TypeError: Cannot read property 'open' of undefined
  </code></pre>
  <p>I can't tell if this is a bug from NextJS side or what, I have been trying to rebuild the project for a while and this same error keeps popping. I have this same error on another component (basically the same concept where I'm passing props this same way). Any help would be really appreciated, thanks</p>