I have a block of text that’s generated randomly from a JSON file, when I use static text, then the code works fine, at the right end of the div, if the word is too long it goes to the next line but in the other case the word gets split

            <div className="test">
                <div className="box">
                    <p className="word">
                        {wordList.map((word, wordIndex) => {
                            const typedWord = typedWords[wordIndex] || "";
                            const isCurrentWord = wordIndex === typedWords.length;
                            const hasWrongChars = typedWord.split("").some((char, index) => char !== word[index]);
                            const isExcessLength = typedWord.length > word.length;
                            const isIncomplete = typedWord.length >= 0 && typedWord.length < word.length && typedWords.includes(typedWord);
                            const shouldHighlightWordRed = hasWrongChars || isExcessLength || isIncomplete;

                            return (
                                <span key={wordIndex}>
                                    {word.split("").map((char, charIndex) => {
                                        let charColor = "#fff";

                                        if (wordIndex < typedWords.length) {
                                            charColor = shouldHighlightWordRed ? "red" : "green";
                                        } else if (isCurrentWord) {
                                            const typedChar = typedChars[charIndex] || "";
                                            charColor = typedChar === char ? "green" : typedChar !== "" ? "red" : "#fff";
                                        }

                                        return (
                                            <span key={charIndex} style={{ color: charColor }}>{char}</span>
                                        );
                                    })}
                                    {'u00A0'} // space after each word
                                </span>
                            );
                        })}
                    </p>
                </div>

                <div style={{ display: "flex", justifyContent: 'row' }}>
                    <input
                        ref={inputRef}
                        value={currentWord}
                        onChange={handleInputChange}
                    />
                </div>

            </div>

CSS:

.test {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 62vh;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 58rem;
    width: 58rem;
}

.box {
  font-size: 1.5rem;
  overflow: hidden;
  height: 149px;
  align-items: center;
  user-select: none;
  white-space: pre-wrap;
  overflow-wrap: break-word
}
.box .word {
  position: relative;
  margin: 0 5px 2px;
}
.box .word span {
color: var(--sub-color);
line-height: 2em;
font-weight: 100;
}

With plain text:

With dynamic text: