React State cannot update array with intervals correctly - reactjs

Question

I'm trying to make a simple animation with JS: I want to randomise a series of letters of a title for an interval of time and after a timeout set the title to the company title basically.
Here's the code I've written so far:
const alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N",
"O", "P", "Q", "R", "S", "T", "I", "U", "V", "W", "X", "Y", "Z", "~", "&", "|", "^", "ç", "#", "]",
"[", "{", "}", "ù", "*", "µ", "¤", "$", "£", "€", "°", ")", "(", "+", "-", "/", "<", ">", "²", "`", "é",
"è", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
const randomFromAlphabet = () => alphabet[(Math.floor(Math.random() * alphabet.length))];
const companyTitle = ['C', 'U', 'I', 'R', 'C', 'K'];
const AboutUs = () => {
const [title, setTitle] = useState(Array.from({ length: companyTitle.length }, () => randomFromAlphabet()));
const [intervals, setIntervals] = useState([]);
const letterRandomize = () => {
const generatedIntervals = Array.from({ length: title.length }, (_, index) => {
return setInterval(() => {
const arrayTitle = Array.from(title);
arrayTitle[index] = randomFromAlphabet();
setTitle(arrayTitle);
}, 350 * (index + 1));
});
setIntervals(generatedIntervals);
};
useEffect(() => {
letterRandomize();
setTimeout(() => {
for (var i = 0; i < companyTitle.length; i++) {
clearInterval(intervals[i]);
const newTitle = [...title];
newTitle[i] = companyTitle[i];
setTitle(newTitle);
}
}, 3000)
}, []);
I know it's not very good written, it's because I'm trying to understand what the problem is.
I've encountered two problems: the first one is the update of the randomised letters:
I've noticed that everytime I update one letter of the array the other go back to the originals.
So for example if we have 'CUIRCK' and after one update we have 'CAIRCK' after another update the second letter returns to 'U', like 'CUIRCB'.
The second problem is that I cannot clear the intervals. I've created 6 different intervals and put them in my state, I don't what I'm doing wrong.

Answer 1

just created a Sandbox which should solve your problem. State inside Intervals can be tricky and you should avoid it. SetState is running async, since setInterval also runs your function async inside an interval you are referring to a state which could not have been already updated to the value you want. I hope I explained myself well enough.
https://codesandbox.io/s/randomized-title-oozo6