我有导航栏选项卡，看起来代码正在工作。但是我无法摆脱eslint错误消息

import { useCallback, useState } from 'react';

const Tabs: React.FC = () => {
    const [activeTab, setActiveTab] = useState(0);

    const handleTabClick = useCallback((index: number) => {
        setActiveTab(index);
    }, []);

    return (
        <nav>
            <ul className="tabs">
                <li>
                    <button
                        className={`tab ${activeTab === 0 ? 'active' : ''}`}
                        onClick={() => handleTabClick(0)}
                    >
                        <a href="/">Transaction</a>
                    </button>
                </li>
                <li>
                    <button
                        className={`tab ${activeTab === 1 ? 'active' : ''}`}
                        onClick={() => handleTabClick(1)}
                    >
                        <a href="/">Overview</a>
                    </button>
                </li>
                <li>
                    <button
                        className={`tab ${activeTab === 2 ? 'active' : ''}`}
                        onClick={() => handleTabClick(2)}
                    >
                        <a href="/">Budgets</a>
                    </button>
                </li>
                <li>
                    <button
                        className={`tab ${activeTab === 3 ? 'active' : ''}`}
                        onClick={() => handleTabClick(3)}
                    >
                        <a href="/">Wallet Settings</a>
                    </button>
                </li>
            </ul>
        </nav>
    );
};

export { Tabs };

对于每个handleTabClick函数，错误为

JSX props should not use arrow functionseslintreact/jsx-no-bind

如果我这样修改代码
onClick={handleTabClick(0)}
我收到onClick的错误：
“（属性）点击后是否有React域属性？：React.MouseEventHandler|未定义类型“void”不能赋给类型“MouseEventHandler|未定义'. ts（2322）索引.d.ts（1484，9）：所需类型来自此处在类型“DetailedHTMLProps〈ButtonHTMLAttributes，HTMLButtonElement〉”上声明的属性“onClick”“
如何正确处理点击选项卡和更改活动选项卡？