React Interweave Library causing hydration error on runtime

I am creating a react component where I am fetching some data from the array of strings where there is some html code. I am using interweave library when looping through that array to render my table. The problem is the it renders correctly but I am getting hydration error on runtime. How to fix it?

export const RewardsFromInvestments = [
  
  "The Net  Yield Farming  Rewards directly attributable to the Token Holder shall be calculated and distributed to the Token Holder’s Account in Periodic Distributions using the following formula:",
  `For the purposes of clarity, the Yield Farming Rewards will comprise of profit generated from trading fees income and native token rewards income. The distribution of the Yield Farming Rewards are as follows:
  <table>
    <tr>
      <td>Trading Fee Income Allocated to Token Holders</td>
      <td>100%</td>
    </tr>
    <tr>
      <td>Trading Fee Income Allocated to ZaynFi</td>
      <td>0%</td>
    </tr>
    <tr>
      <td>Native Token Rewards Allocated to Token Holders</td>
      <td>80%</td>
    </tr>
     <tr>
      <td>Native Token Rewards Allocated to ZaynFi </td>
      <td>20%</td>
    </tr>
  </table>`,

The code for creating the list dynamically:

 <ol
 className={`list-[lower-roman] font-normal text-[16px]  pl-5 outside ${styles.listTerms}`}
   >
 {RewardsFromInvestments.map((i) => (
  <li className={styles.listContent}>{<Markup content={i} />}</li>
   ))}
 </ol>

Error during runtime
Web output for the table

This runtime error goes away whenever I comment this line. It makes it clear that this is causing the problem. Please help me fix it.

<li className={styles.listContent}>{<Markup content={i} />}</li>