Changing object in array using useState - reactjs

Question

I'd like to change each Data[0].datasets label using the array in Axisstate
I tried to put Axis's label to each Data label but i doesn't work, and it's not what i expected it would be.
both are changed to as same as the last one that i write.
and I'm trying to add more elements to datasets using the AxisHandler function to use push.
and It's doesn't change as soon as i click AxisUpdatefunction.
I'd like to know why it happens and what i should do .
Thank you in advance.
my code is like this:
import React, { useState } from "react";
import { Data, AppendData } from "./Data";
const Changeable = () => {
const [Axis, setAxis] = useState([]);
const changeHandler = index => e => {
setAxis(Axis =>
Axis.map((el, i) => (i === index ? { ...el, label: e.target.value } : el))
);
};
const AxisHandler = e => {
setAxis([
...Axis,
{
label: "",
data: "",
backgroundColor: "",
},
]);
Data[0].datasets.push(AppendData);
};
const AxisUpdate = () => {
if (Data[0].datasets[1].label) {
Data[0].datasets[1].label = Axis[0].label;
}
if (Data[0].datasets[2].label) {
Data[0].datasets[2].label = Axis[1].label;
}
};
return (
<div>
<button onClick={AxisHandler}>addAxis</button>
<>
{Axis.map((data, index) => (
<>
<input
placeholder={index + 1}
type="text"
onChange={changeHandler(index)}
/>
</>
))}
</>
<button onClick={AxisUpdate}>changeLabel</button>
<br />
<h1>{Data[0].datasets[0].label}</h1>
<br />
<h1>{Data[0].datasets[1] && Data[0].datasets[1].label}</h1>
<br />
<h1>{Data[0].datasets[2] && Data[0].datasets[2].label}</h1>
</div>
);
};
export default Changeable;
Data and AppendData
export const defaultLabels = [
"0",
"0",
"0",
"0",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
];
export const defaultDatas = [
13000, 11000, 9000, 4000, 14000, 16000, 20000, 11000, 14000, 11200, 12000,
12000,
];
export const defaultBackgroundColor = [
"#ff6385e1",
"#36a3ebf0",
"#ffcf56c8",
"#4bc0c0be",
"#9966ffa2",
"#ffa040b2",
];
export let AppendData = {
label: "dataSetting",
data: defaultDatas,
backgroundColor: defaultBackgroundColor,
};
export let Data = [
{
labels: defaultLabels,
datasets: [
{
label: "First",
data: defaultDatas,
backgroundColor: defaultBackgroundColor,
},
],
}, ///1번
{
labels: defaultLabels,
datasets: [
{
label: "Second",
data: defaultDatas,
backgroundColor: defaultBackgroundColor,
},
],
},
{
labels: defaultLabels,
datasets: [
{
label: "Third",
data: defaultDatas,
backgroundColor: defaultBackgroundColor,
},
],
},
]; ///2번