How to dynamically render a specific amount of rows and columns in React with Bootstrap

Question

I'm new to React and I'm trying to render a board for the game Wheel of Fortune using bootstrap in React. If a random phrase is generated I would like a new row to render every time there is a space in the string. For example: "lets go" would render "lets (new row) go" on the UI. In my code, I call a function to render each letter in a box. However, I'm not getting anything to show up on the UI.

I also tried splitting the array and mapping it with (screenshot of this approach below):

splicedArray: Array(Math.ceil(this.state.charactersArray.length / this.state.itemsPerRow)).fill().map(() => this.state.charactersArray.splice(0, this.state.itemsPerRow)),  

((in render))

 {this.state.splicedArray.map((character) => <Square value={character}/>)}

      

Here is my code for the Board:

import Button from "@restart/ui/esm/Button";
import React from "react";

import { Component } from "react";
import { ListGroup, breakpoint, idx, Card, Container, Row, Col } from "react-bootstrap";
import Square from "./square.component.js";
import {character} from "./square.component"


class Board extends Component{
    
    constructor(props){
        super(props);
        this.state={
            randomPhrase: "Placeholder",
            wordArray: ["temp"],
            charactersArray: ["temp"],
            guess: "t",
            index: 0
        };
    }
    phrases=["dont let the cat out of the bag", "lets hit the road", "lets rock and roll"]

    //generates a random word from the word list in state then splits it by character into an array
    //this array is called below to generate square objects
    randomWordGenerator = () => {
            this.setState({ randomPhrase: this.phrases[Math.floor(Math.random() * this.phrases.length)],
                            wordArray: this.state.randomPhrase.split(' '),   
                            charactersArray: this.state.randomPhrase.split('')           
                            
    })};

    renderRows = () => {
        const rows = [];

        for(let i = 0; i < this.state.charactersArray.length; i++) {
            if(this.state.charactersArray[i] === " ") {
                this.state.index++;
               rows.push(
                   <Row>
                       {this.renderColumns(this.state.index)}
                   </Row>
               )       
               this.state.index = 0;
            }
            else {
               this.state.index++;
            }
        }
    }

    renderColumns = (index) => {
        const columns = [];

        for(let i = 0; i <= index; i++) {
            columns.push(
                <Col>
                {this.renderSquares}
                </Col>
            )
        }
    }

    renderSquares = () => {
       return this.state.charactersArray.map((character) => character === " " ?  <Card style={{ height: '5rem', width: '4rem' }} className="bg-success justify-content-center text-center border border-dark">
       Logo
       </Card> : 
       <Square value={character}/>)
    }

    render(){
        return(                   
            <ListGroup vertical>
               
                <Button variant="outline-generate" size="lg" onClick={this.randomWordGenerator}>Generate</Button>
                <Button variant="outline-generate" size="lg" onClick={this.renderRows}>Render</Button>
               {this.state.splicedArray}
                
            </ListGroup>

           
        );
    }
}
export default Board;

And here is my code for the Square:

import React, { Component } from "react";
import Button from "@restart/ui/esm/Button";
import { Card, ListGroup } from "react-bootstrap";
import { filter } from 'lodash';
import { render } from "react-dom";

class Square extends Component{  
 

    render(){
        return(
            <ListGroup.Item className="mx-1 p-0 mt-1 border border-dark" variant="light">
                
              <Card style={{height: '5rem', width: '4rem', fontSize: '4rem'}} className="text-dark rounded justify-content-center text-center border border-dark">
             
              {this.props.value}    
                
              </Card>
            </ListGroup.Item>
        )
    }
}

export default Square;

Any help would be greatly appreciated!

Output Screenshot: When I hit render a dark border forms behind the button. Output Image

Ouput Screenshot when splitting the array: Splitting the array