Append items from one array to another, then if button is clicked on, move the last item back

I’m building a function to help me with moving items from the arrays. Component renders various sections:

filledArray – an array of null’s, that produces a dynamic amount of buttons depending on the length of the word.
bottomLetters – an array of letters, where the word has been split onto each individual letter. Once the letter is clicked on it will append a new item in filledArray.
delete button – once clicked on, deletes the last item within the topLetter array and adds the back to the bottomLetters array..

Now I have two issues with the code:

It does not update the render automatically. I’d have to save the code sandbox to generate the result.
When clicking on delete button it breaks the value of the items in the bottomLetters array. (For example try clicking on three items from bottomLetters array, hit save and then hit delete button, it won’t move the items back to the array).