Accessing props and their types on a Component

Question

So I'm very new to React and Typescript and have a simple question but cant seem to find an answer.

Im trying to use typescript to build a tab layout with headless ui following docs here

I am trying to use the prop on the component <Tab> called selected but am running into issues because selected is classed as void?

the code:

<Tab
    className={({ selected }) => {
        classNames(
            "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
            "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
            selected
                ? "bg-blue-50"
                : "bg-blue-100"
        );
    }}
></Tab>

the typescript compiler error:

The expected type comes from property 'className' which is declared here on type 'IntrinsicAttributes & CleanProps<"button", TabPropsWeControl> & OurProps<"button", TabRenderPropArg> & { ...; } & { ...; }'

fairly sure that there is something wrong with how i am defining types but i dont even know how to find the type of selected, P.S. the classNames() function takes in a string[] and returns a string

Answer 1

ended up simply adding a return statement and it worked :(

                            <Tab
                                key={tab}
                                className={({ selected }) => {
                                    return classNames(
                                        "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-blue-700",
                                        "ring-white ring-opacity-60 ring-offset-2 ring-offset-blue-400 focus:outline-none focus:ring-2",
                                        selected
                                            ? "bg-blue-50"
                                            : "bg-blue-100"
                                    );
                                }}
                            >
                            </Tab>