How To Solve React Hydration Error in Next

I keep getting an error saying "Hydration failed because the initial UI does not match what was rendered on the server."

I have no idea what is causing the error so I was hoping someone else may know what is wrong. I think I narrowed down where the error is happening and posted the code below of where I think it breaks. If any more code is needed let me know.

Thanks in advance for all the help.

import React, { useEffect } from "react";
import styles from "../../styles/Home.module.css";
import Coin from "../Coin/Coin";

type CoinListProps = {
  coins: any;
};

const CoinList = ({ coins }: CoinListProps) => {
  useEffect(() => {
    console.log(coins);
  }, []);

  return (
    <div className={styles.coinList}>
      <table>
        <tr>
          <th>Coin</th>
          <th>Price</th>
          <th>24h</th>
        </tr>
        {coins.map((coin: any, index: any) => (
          <Coin key={index} coin={coin} />
        ))}
      </table>
    </div>
  );
};

export default CoinList;

I think you probably missed tbody in table. This will cause an error in NextJS. Try:

<table>
    <tbody>
        <tr>
            <th>Coin</th>
            <th>Price</th>
            <th>24h</th>
        </tr>
        {coins.map((coin: any, index: any) => (
            <Coin key={index} coin={coin} />
        ))}
    </tbody>
</table>