How to use useState in the tab page in antd react

Question

类型 'readonly [{ readonly key: "1"; readonly label: "Tab 1"; readonly children: "Content of Tab Pane 1"; }, { readonly key: "2"; readonly label: "Tab 2"; readonly children: "Content of Tab Pane 2"; }, { ...; }]' 是 'readonly' 类型，不能赋值给可变类型 'Tab[]'。ts(4104)

import React, { useState } from "react";
import "./index.css";
import { Tabs } from "antd";
import type { TabsProps } from "antd";

const items: TabsProps["items"] = [
  {
    key: "1",
    label: `Tab 1`,
    children: `Content of Tab Pane 1`
  },
  {
    key: "2",
    label: `Tab 2`,
    children: `Content of Tab Pane 2`
  },
  {
    key: "3",
    label: `Tab 3`,
    children: `Content of Tab Pane 3`
  }
] as const;
type ArrKey = typeof items[number]["key"];

const App: React.FC = () => {
  const [index, setIndex] = useState<ArrKey>("1");

  const onChange = (key: string) => {
    setIndex(key);
  };

  return <Tabs activeKey={index} items={items} onChange={onChange} />;
};

export default App;

https://codesandbox.io/s/basic-antd-5-8-3-forked-p9myfs?file=/demo.tsx:0-706

Answer 1

Hi, hope I understood your problem correctly I fixed your problem here https://codesandbox.io/s/basic-antd-5-8-3- forked-7m8jhc?file=/demo.tsx