ReactJs: отображение списка изображений из массива URL-адресов

Итак, это моя первая неделя, когда я занимаюсь Javascript, и я пытаюсь создать настольную игру на ReactJs. Я генерирую доску и ее квадраты, используя массив, и квадраты отображают текст, который содержится в массиве с соответствующим индексом т.е., если array [0] = 'w', доска выглядит как это Однако я пытаюсь сделать так, чтобы на лицевой стороне квадрата вместо буквы появлялось изображение.

Я пробовал array [0] = {imgurl}, но безуспешно. Как мне этого добиться?

Это мой App.js

import React, { Component } from 'react';
import './App.css';
import player from './player.png'

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      board: Array(Math.pow(2,2)).fill(''),
      sqr: {width:'50px',height:'50px'},
      brd: {width:'100px',height:'100px'}
    }
    this.state.board[0]='w'
  }

  render() {
    return (
      <div className = "app-container">
        <div style = {this.state.brd} className = "board" >

        {this.state.board.map((cell) => {
          return <div style = {this.state.sqr} className = "square">{cell}</div>;
        })}

        </div>

      </div>
    )
  }
}

export default App;

Это мой App.css

.board {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: 10%;

}

.square {
  box-sizing: border-box;
  border: 2px solid black;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}