I found a solution.
Overloading types and defining functions.
type MyTooltipState = TooltipProps<ValueType, NameType> & {
StackedBarChartLabel: BarChartShareLabelState;};
const CustomTooltip = ({
active,
payload,
label,
StackedBarChartLabel,
}: MyTooltipState) => {
if (active && payload && payload.length) {
return (
<div style={{ backgroundColor: "white" }}>
<p>{label}</p>
{payload.map((pld: any) => (
<p key={pld.dataKey}>
{pld.dataKey}:{StackedBarChartLabel[`${label}`][`${pld.dataKey}`]}
</p>
))}
</div>);}
return null;};
Call the function as follows.
<Tooltip
content={(props) => (
<CustomTooltip
active={props.active}
payload={props.payload}
label={props.label}
StackedBarChartLabel={dataset.StackedBarChartLabel}
/>)}
/>