jsxAttribute completion works but not in an expected way

tsconfig.json

{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["./src"]
}

:CocInfo


## versions

vim version: NVIM v0.6.0 node version: v16.13.1 coc.nvim version: 0.0.80-cbd326be22 coc.nvim directory: /home/trietminh/.vim/plugged/coc.nvim term: alacritty platform: linux

Log of coc.nvim

2021-12-21T19:47:29.636 INFO (pid:29879) [plugin] - coc.nvim 0.0.80-cbd326be22 initialized with node: v16.13.1 after 56ms 2021-12-21T19:47:30.001 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:32.052 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:32.824 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:42.235 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:45.063 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:46.667 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:48.178 INFO (pid:29879) [attach] - receive notification: showInfo [] 2021-12-21T19:47:48.796 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:50.918 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:53.301 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:54.436 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:47:54.820 INFO (pid:29879) [services] - registered service "tsserver" 2021-12-21T19:47:58.908 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:48:00.315 INFO (pid:29879) [completion-complete] - Results from: tsserver-typescript 2021-12-21T19:48:01.268 INFO (pid:29879) [completion-complete] - Results from: around,tsserver-typescript 2021-12-21T19:48:03.716 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:48:04.435 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:48:04.790 INFO (pid:29879) [completion-complete] - Results from: file 2021-12-21T19:48:07.050 INFO (pid:29879) [completion-complete] - Results from: tsserver-typescript 2021-12-21T19:48:13.078 INFO (pid:29879) [completion-complete] - Results from: around,tsserver-typescript 2021-12-21T19:48:15.730 INFO (pid:29879) [completion-complete] - Results from: tsserver-typescript 2021-12-21T19:48:17.170 INFO (pid:29879) [completion-complete] - Results from: tsserver-typescript 2021-12-21T19:48:19.700 INFO (pid:29879) [completion-complete] - Results from: tsserver-typescript 2021-12-21T19:48:22.379 INFO (pid:29879) [attach] - receive notification: highlight [] 2021-12-21T19:48:25.547 INFO (pid:29879) [completion-complete] - Results from: around,tsserver-typescript 2021-12-21T19:48:28.464 INFO (pid:29879) [attach] - receive notification: showInfo []



I have a button component like this
![issues](https://user-images.githubusercontent.com/57322084/146931679-9dbe3c6b-4fee-4b83-9a60-6c7b362cb041.png)

but in my main component, if I type the attributes It will work like this
the cursor is in wrong position,

![jsx-attributes-snippets-4-5](https://user-images.githubusercontent.com/57322084/147178752-3fb6cee6-8241-4468-9eee-6714e4c7e1b9.gif)

![Screenshot_2021-12-21-07-41-08_1920x1080](https://user-images.githubusercontent.com/57322084/146931759-2708856f-0f0a-4009-bf48-411641644e95.png)

Let me know if I have done something wrong

neoclide / coc-tsserver

jsxAttribute completion works but not in an expected way #334

Log of coc.nvim