Как сделать так что бы шахматная фигура по клику перемещалась на другую ячейку?

https://jsfiddle.net/sveqm9n0/3/#&togetherjs=rVjpriIVHs

Как сделать так что бы шахматная фигура по клику перемещалась на другую ячейку?

Вот так получается "undefined". По ключу всё работает. Главное, функция creatFigure прекрасно заполняет две мои другие таблицы, построенные по другому принципу. Вероятно, в этой программке возникают проблемы либо символикой ключей, либо с апдейтом. В общем, моё понимание отказывается меня понимать.

function creatFigure(btn, key) { // вставка функции на строке btn.innerHTML = creatFigure(btn, key);
{
if(key == '') return false;
let config =
{
pieceDir: 'pieces/',
pieceExt: '.png',
};
var img = document.createElement('img');
img.src = config.pieceDir + key + config.pieceExt;
img.style.cursor = 'auto';
img.key = key;
btn.appendChild(img);
}
}

const state = [
['Q', 'Q', 'Q'],
['', '', ''],
['p', 'p', 'p'],
];

const buttons = [...Array(3)].map(c => c = Array(3));
const tbl = document.querySelector('table');
const boardInit = () => {
[...tbl.querySelectorAll('tr')].forEach((tr, rowIndex) => {
if (rowIndex >= state.length) return;
[...tr.querySelectorAll('td')].forEach((td, colIndex) => {
if (colIndex === 0) return;
const button = document.createElement('button');
button.className = 'chess-cell';
button.type = 'button';
button.dataset.x = colIndex - 1;
button.dataset.y = rowIndex;
td.appendChild(button);
button.addEventListener('click', onBtnClick);
buttons[rowIndex][colIndex - 1] = button;
})
})
}

const boardUpdate = () => {
state.forEach((row, y) => {
row.forEach((key, x) => {
const btn = buttons[y][x];
btn.dataset.key = key;
btn.innerHTML = creatFigure(btn, key);
const isSelected = dataSelected && btn.dataset === dataSelected;
btn.classList[isSelected ? 'add' : 'remove']('selected');
})
})
}

Как сделать так что бы шахматная фигура по клику перемещалась на другую ячейку?

Спасибо .

Как сделать так что бы шахматная фигура по клику перемещалась на другую ячейку?

А можно обойтись без символьных ключей ? Всё-таки шахматные фигуры - в слишком узкой специализации.
const figures = {
'Q': '♕', // queen
'p': '♟', // pawn
};
Попытался расширить, но не работает с использованием img.png (выдаёт undefined). Заменой button на image тоже получен undefined.
{
if(key == '') return false;
let config =
{
pieceDir: 'pieces/',
pieceExt: '.png',
};
img.src = config.pieceDir + key + config.pieceExt;
img.style.cursor = 'auto';
img.key = key;
}