Получение проблемы при рендеринге внутри рендеринга в React

Я попытался выполнить рендеринг функции gridWithNode внутри рендеринга, который не работает, и я получаю эту ошибку: Предупреждение: функции недействительны в качестве дочернего элемента React. Это может произойти, если вы возвращаете компонент вместо рендеринга. Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее. в дивизии в Pathfind (http://localhost:3000/static/js/bundle.js:185:74) в дивизии в приложении

мой код выглядит так в Pathfind.js

import React, { useState, useEffect } from "react";
import Node from './Node';
import './Pathfind.css';

const rows = 5;
const cols = 5;

const Pathfind = () => {
const [Grid, setGrid] = useState([]);

useEffect(() => {
    initializeGrid();
}, []);

// CREATES THE GRID
const initializeGrid = () => {
    const grid = new Array(cols);

    for (let i = 0; i < cols; i++) {
        grid[i] = new Array(rows);
    }
    createSpot(grid);

    setGrid(grid);
}

// CREATES THE SPOT 
const createSpot = (grid) => {
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            grid[i][j] = new Spot(i, j);
        }
    }
};

// SPOT CONSTRUCTOR
function Spot(i, j) {
    this.x = i;
    this.y = j;
    this.f = 0;
    this.g = 0;
    this.h = 0;
}

// GRID WITH NODE
const gridWithNode = () => {
    <div>
        {Grid.map((row, rowIndex) => {
            return (
                <div key = {rowIndex} className='rowWrapper'>
                    {row.map((col, colIndex) => {
                        return (
                            <Node key = {colIndex} />
                        )
                    })}
                </div>
            )
        })}
    </div>
}
console.info(Grid);
return (
    <div className = "Wrapper">
        <h1>Pathfind Component</h1>
        {gridWithNode}
    </div>
  )
}

export default Pathfind;