Why does nextjs throw a Hydration error when passing JSON data?

Question

im trying to implement a simple database browsing interface on my website using nextjs. Though when I add data to the lower leveled containers, it throws a Hydration Error. I have tried looking at the documentation and other SO Threads though none have seemed to help ...

browse.jsx:

import React from 'react'
import Browser from '../components/browser/Browser'
import Linkspace from '../components/Linkspace'
import Navbar from '../components/Navbar'

function browse() {

return (
<div className='bg-navy-sierra-100 dark:bg-darknavy-900'>
    <Navbar/>
    <div className="h-screen">
        <Linkspace/>
        <Browser items='[{"id": "1","title": "this is","vort": "Kharak"},{"id": "2","title": "a test","vort": "Taiidan"},{"id": "4","title": "dont use","vort": "Hiigara"},{"id": "3","title": "in production","vort": "Balcora"}]'/>
    </div>
</div>
)
}

export default browse

Browser.jsx:

import React from 'react'
import BrowserContainer from '../videoContainers/BrowserContainer.jsx';

function Browser(items) {

    const data = JSON.parse(items.items)
    const array = []

    for (let i = 0; i < data.length; i++) {
        array.push(data[i])
    }

    return (
        <div className='mx-20 flex flex-col gap-4'>
            {array.map((item) => 
                <BrowserContainer trackData={JSON.stringify(item)}/>)
            }
        </div>)
}

export default Browser

BrowserContainer.jsx:

import React from 'react'

function BrowserContainer(trackData) {
    
    const data = JSON.parse(trackData.trackData)

    return (
        <div className="text-navy-sierra-100 bg-darknavy-800" >
            <table>
                <td className='w-16'>{data.id}</td>
                <td className='w-32'>{data.title}</td>
                <td className='w-32'>{data.vort}</td>
            </table>
        </div>
    )
}

export default BrowserContainer

Through some testing and commenting out certain code parts I've found out that the table throws the Hydration error. Though with all the explanations I've read on the Internet, I can't figure out why this is thrown and can't seem to fix it either.

<table>
    <td className='w-16'>{data.id}</td>
    <td className='w-32'>{data.title}</td>
    <td className='w-32'>{data.vort}</td>
</table>