В чем заключается ошибка в моем коде?

---

////////App.js файл////////////////////
импорт React, { useState } из 'react';
импорт './App.css';
функциональный квадрат(реквизит){
вернуть (
кнопка <
onclick="{props.onClick}
"&ГТ;{реквизит.значение}
);
}
///////////////////////////////////////////
функция Bord (реквизит) {
const квадраты=реквизит.квадраты;
///////////////////////////////////////
функция renderSquare(i){
вернуть(
<квадрат
значение="{реквизит.квадратов[я]}
"onclick="{props.onClick(i)}
">
);
}
вернуть(

);
}
///////////////////////
функциональное приложение(реквизит){
// const [arr,setArr]=useState(props.arr)
const [квадраты,setSquares]=useState(props.firstvalue);
const [xIsNext,setXIsNext]=useState(true);
функция handlerChange(x){
const squares={квадраты},xIsNext={xIsNext};
квадраты[x]=(xIsNext)? 'X':'O';
xIsNext=!xIsNext;
setSquares(квадраты);
setXIsNext(xIsNext);
}
вернуть(

)
}


экспорт приложения по умолчанию;

Что я уже пробовал:

///////index.js файл///////////////
импорт реагируют с 'реагировать';
импорт ReactDOM из 'react-dom';
импорт'. /index.css';
импорт приложения из './App';
импорт reportWebVitals из './reportWebVitals';
var arr=Array(9).fill ("1")
Реактдом.рендеринг(
&ЛТ;реагируют.strictmode&ГТ;

,
документ.метода getElementById('корень')
);

---