Hey im trying to create a function that will return a randomided letter based on the inputed word.
I got that working but im getting a error from nextjs saying

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

with the console.log of

Warning: Text content did not match. Server: "WJOOTIK" Client: "HAPNWDB"

Here is the function

    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

    function scramble(word) {
        let scrambled = "";
        for (let i = 0; i < word.length; i++) {
            scrambled += letters[Math.floor(Math.random() * letters.length)];
        }
        return scrambled;
    }

and what it implanted in

<h1 key={title} data-value={title} >{scramble(title)}</h1>

Everything work except it throws the error.
Is anyone able to help me with this