Should i use useEffect or onClick handler? – Reactjs

I have a component with tabs say TabA and TabB. Each of them has a table who’s data changes depending on which tab the user is at.

Now to get this functionality there are two approaches to it. Either i can use a onClick handler on the tab and set the data. Or on click of the tab i can set the active tab in a state and then use a useEffect to update the data.

With onClick handler

const MyComponent = () => {
    const handleClick  =() => {
        // set active tab and setData depending upon which tab is pressed
    }
    return <>
        <TabHeader>
            <TabTitle onClick={handleClick}>TabA</TabTitle>
            <TabTitle onClick={handleClick}>TabB</TabTitle>
        </TabHeader>
        <TabContent>
            <MyTable data={data}></MyTable>
        </TabContent>
    </>
}

With useEffect

const MyComponent = () => {
    useEffect(() => {
        // set data here
    }, [activetab])
    const handleClick  = () => {
        // set active tab
    }
    return <>
        <TabHeader>
            <TabTitle onClick={handleClick}>TabA</TabTitle>
            <TabTitle onClick={handleClick}>TabB</TabTitle>
        </TabHeader>
        <TabContent>
            <MyTable data={data}></MyTable>
        </TabContent>
    </>
}

I am aware of how to do it. But which one of these is a better solution?