Создание шахматной доски с использованием 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?