Mapping Json File in React Displaying Wrong Info in Modal on site but not in Console

Question

There are 3 Mint Groups being mapped in React. The code below pulls the Title and Description from the mint groups json file and then populates the page with the 3 different mint groups in sections. To conserve space, the mint group description goes into a CSS-only modal and by default is invisible until you click the information icon. When all 3 information icons are clicked it displays the same description from the first mint group in the Json file. However, in the console, it shows that it is pulling all three descriptions and it displays this correctly. However, on-site it does not.

{mintGroups.map((x, index) => (                                        
   <div key={index} className="w-100">
      <div className="titlebox">
         <div className="titleboxA">           
            {x.title ? <h2>{x.title}</h2> : null} 
         </div>
         <a className="btn" href="#open-modal"><Info></Info></a>
         <ModalWindow id="open-modal">
            <InnerModal>
               <a href="#" title="Close" className="modal-close">X</a>                                                 
               {x.description ? <ModalP>{x.description}</ModalP> : null} 
            </InnerModal>
         </ModalWindow>  
      </div>                     
      {x.groups.map((y, k) => ( <MintGroup mintGroup={y} key={k} candyMachineV3={candyMachineV3} /> ))}
   </div> 
))} 

Example On-Site:
"Description 1 is here."
"Description 1 is here."
"Description 1 is here."
Example in Console:
"Description 1 is here."
"Description 2 is here."
"Description 3 is here."

I don't know why this is happening, any help would be appreciated. Thank You.