Q: Display tooltip with diferent values for each bar using recharts I have a chart and I want to display a tooltip for each bar with its data.
I used this example from their documentation https://recharts.org/en-US/examples/CustomContentOfTooltip
I created a custom tooltip element
   const CustomTooltip = ({ active, payload }: TooltipProps<number, string>) =>{
        console.log(payload)
        if (active) {
          return (
            <div className="custom-tooltip">
                {payload && payload[0]  &&
                    <p className="label">{`${payload![0].name}: ${payload![0].value}`}</p>
                }
            </div>
          );
        }
        return null;
      };

and this is bar chart element where I use the custom tooltip as in the example above.
<BarChart> 
 ...
 <Tooltip cursor={false} content={<CustomTooltip />} />
{Object.values(dataKeyBar).map(({chart, color}, index) => {
   return <Bar
         radius={barSize}
         key={`bar-${index}`}
         barSize={barSize}
         dataKey={chart}
         fill={color}
     />
  })}
</BarChart>

My problem is no matter what bar I'm hovering, I get the same data in my tooltip -
{`${payload![0].name}: ${payload![0].value}`}


the payload looks like this:

what I have tried to display different data in the tooltip for each bar is for the customTooltip but the tooltip is not showing at all.
 {payload && payload.map((bar: any) => {
      return  <div className="custom-tooltip"><p className="label">{`${bar.name}: ${bar.value}`}</p></div>
    })}

How can I display a tooltip with different data for each bar?

A: From what i'm seeing right now you are locating the Custom Tooltip component outside of map, so no matter where you hover over you'll get the same result sure, did you try to call it inside map ?
