Bug: Multi-line layout showing a stray word in material until you reach that word in the lesson #248
Description
On Discord someone posted a video showing multiline material for the diphthongs lesson:
sought hour soul proud souls pause cows All stall house called cause taught paused causes calls route soup rouse sour howl trout coil soiled call hours south caught hall wall walls tall Paul soil stout spoil spoiled sauce Saul spoils scout
When they reached "All", it changed to "tout", (covering the space between "All" and "stall") so it looked like:
sought hour soul proud souls pause cows toutstall house called cause taught paused causes calls route soup rouse sour howl trout coil soiled call hours south caught hall wall walls tall Paul soil stout spoil spoiled sauce Saul spoils scout
Typing the word "tout" at that point correctly moved onto "stall".
The diphthongs lesson doesn't have the word "All" in it anywhere.
My current working theory is that it's an issue with state not updating correctly and the "All" might have come from a previous lesson. EntireMaterial is wrapped in a React.memo whereas CurrentMaterialHighlight is not, so that might be why the latter presents correctly. Maybe using the presentedMaterial's array index as the React key in key={index} is a problem.
So far, I've been unable to reproduce the problem myself so I cannot be confident in reliably fixing it.