Ant design 4 table loading not working properly - reactjs

Question

Im using my react project for ant design 4, i added table loading for loading, I have some conflict added loaded not working, anyone know how to fix that issue?
Thanks
code here
Here the stackblitz
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
render: text => {text}
},
{
title: "Age",
dataIndex: "age",
key: "age"
},
{
title: "Address",
dataIndex: "address",
key: "address"
},
{
title: "Tags",
key: "tags",
dataIndex: "tags",
render: tags => (
<span>
{tags.map(tag => {
let color = tag.length > 5 ? "geekblue" : "green";
if (tag === "loser") {
color = "volcano";
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</span>
)
},
{
title: "Action",
key: "action",
render: (text, record) => (
<span>
Invite {record.name}
<Divider type="vertical" />
Delete
</span>
)
}
];
class App extends React.Component {
state = {
data: [],
pagination: {
current: 1,
pageSize: 10
},
loading: true
};
componentDidMount() {
setTimeout(() => {
this.setState({ loading: false });
}, 1000);
}
render() {
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park",
tags: ["nice", "developer"]
},
{
key: "2",
name: "Jim Green",
age: 42,
address: "London No. 1 Lake Park",
tags: ["loser"]
},
{
key: "3",
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park",
tags: ["cool", "teacher"]
}
];
return (
<Table
columns={columns}
dataSource={data}
loading={this.state.loading}
onChange={this.handleTableChange}
/>
);
}
}
ReactDOM.render(<App />, document.getElementById("container"));