why antd switch rendering is not working? - reactjs

Question

I try to make typescript react setting
and then just install antd
$ yarn add antd
and fix app.tsx like this
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { Switch } from "antd";
function App() {
function onChange(checked: any) {
console.log(`switch to ${checked}`);
}
return (
<div className="App">
<Switch defaultChecked onChange={onChange} />
</div>
);
}
export default App;
but i can't see right switch
https://i.stack.imgur.com/rmGjJ.png
i want to look like this
https://i.stack.imgur.com/xKVWW.png
and this is my package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"antd": "^4.18.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "5.0.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
How to solve this rendering problem?