Создание шахматной доски с использованием React.js

Всем привет! Я начинающий React.js разработчик, и такой вопрос: написал функцию, которая отрисовывает шахматную доску. Но проблема в том, что я не могу понять, почему происходит ошибка:

TypeError: Cannot read property 'appendChild' of null

Chess.jsx

import React from 'react'
import './Chess.css'
import drawCells from './drawCells'

function Chess() {


    return (
        <div className='board'>
            {drawCells()}
        </div>
    )
}

export default Chess

drawCells.js

export default function drawCells(){
    let mainField = document.querySelector('.board');
    let block;
    let flag = true;

    for(let i = 0; i < 8; i++){
        for(let j = 0; j < 8; j++){
            if(j == 0) flag = !flag;

            block = document.createElement('div');

            if(flag) block.className = 'cell black';
            else block.className = 'cell white';

            mainField.appendChild(block);
            flag = !flag;
        }
    }
}

Возможно дело в том, что я использую document.querySelector?

Источник: https://ru.stackoverflow.com/questions/1208906/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D1%88%D0%B0%D1%85%D0%BC%D0%B0%D1%82%D0%BD%D0%BE%D0%B9-%D0%B4%D0%BE%D1%81%D0%BA%D0%B8-%D1%81-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%D0%BC-react-js