Есть ли способ, позволяющий пользователю динамически добавлять точки для заполнения квадрата по осям x и y?

Question

Я все еще новичок в React, и я пытаюсь создать коробку и заполнить коробку точками, идущими слева направо и сверху вниз, чтобы заполнить всю коробку. Я хочу иметь возможность изменять количество точек в квадрате с помощью ввода диапазона, чтобы пользователь мог решить, сколько точек заполнить поле. Например, если пользователь выбирает 3 точки слева направо и 4 точки вверх и вниз, квадрат будет иметь 12 равномерно распределенных точек.

изображение того, как должен выглядеть конечный результат

изображение действующего кода на данный момент

class Wall extends Component {
    constructor(props){
        super(props);
        this.state = {
          widthValue: 0,
          heightValue: 1,
        };
      }

    handleWidthChange = (e) => {
        this.setState({widthValue: e.target.value});
    };

    handleHeightChange = (e) => {
        this.setState({heightValue: e.target.value});
    };      

    render() {
        let widthCircles = [];
        let heightCircles = [];

        for (let i = 0; i < this.state.widthValue; i++) {
            widthCircles.push(<Circle key={i}></Circle>);
        }

        for (let i = 0; i < this.state.heightValue * this.state.widthValue - this.state.widthValue; i++) {
            heightCircles.push(<Circle key={i}></Circle>)
        }

        // console.log(heightCircles.length / this.state.widthValue)

        return (
            <Fragment>
                <p>Wall settings:</p>
                <div>
                    <input type="range" min="0" max="20" value={this.state.widthValue} required onChange={this.handleWidthChange}  />
                    <label>Width</label>
                    <RangeVaule>{this.state.widthValue}</RangeVaule>
                </div>

                <div>
                    <input type="range" min="0" max="20" value={this.state.heightValue} required onChange={this.handleHeightChange} />
                    <label>Height</label>
                    <RangeVaule>{this.state.heightValue}</RangeVaule>
                </div>

                <Walls>
                    <TestingWidth>
                        {widthCircles}
                    </TestingWidth>
                    <TestingHeight>
                        {heightCircles}
                    </TestingHeight>
                </Walls>
            </Fragment>
        )
    }
};

export default Wall;