You need the state object for storing the local variable that needs to be automatically updated by React. To be able to use state object, you must convert your functional component code to class component.

Here are some changes I made to fix the problems.

import React, { Component } from 'react';

export class myApp extends Component {
  state = {
    word: ['1234'],
    topLetters: [],
    bottomLetters: [],
    filledArray: [],
  };

  componentDidMount() {
    this.setState({
      bottomLetters: [...this.state.word[0]],
      filledArray: new Array(this.state.word[0].length).fill(null),
    });
  }

  handleLetters2Click = (letter, id) => {
    this.setState({ topLetters: [...this.state.topLetters, { letter }] });

    let bottomLetters = [...this.state.bottomLetters];
    bottomLetters.splice(id, 1);
    this.setState({ bottomLetters });
  };

  deleteLast = () => {
    if (!this.state.topLetters.length) return;

    const lastTopLetter = this.state.topLetters.length - 1;
    const lastLetter = this.state.topLetters[lastTopLetter].letter;

    let topLetters = [...this.state.topLetters];
    topLetters.pop();
    this.setState({ topLetters });

    let bottomLetters = [...this.state.bottomLetters];
    bottomLetters.push(lastLetter);
    this.setState({ bottomLetters });
  };

  render() {
    const { filledArray, topLetters, bottomLetters } = this.state;

    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <div style={{ marginBottom: '40px' }}>
          {filledArray.map((index, id, item) => (
            <button key={id} className='item'>
              {topLetters[id] && topLetters[id].letter}
            </button>
          ))}
        </div>
        <div>
          {bottomLetters.map((index, id, item) => (
            <button
              key={id}
              className='item'
              onClick={() => this.handleLetters2Click(item[id])}
            >
              {item[id]}
            </button>
          ))}
        </div>
        <button onClick={this.deleteLast} style={{ marginTop: '40px' }}>
          DELETE
        </button>
      </div>
    );
  }
}

export default myApp;