different name on tooltip from xaxis on barchart about recharts HOT 4 CLOSED

<XAxis textAnchor="start" interval={0} dataKey="label" tick={<CustomizedAxisTick/>} />
<Tooltip wrapperStyle={{ zIndex: 1000 }} content={<CustomTooltip />}/>

import React from 'react';
import { StyledCustomTooltip, StyledTooltipPayload } from './styles';

export type CustomTooltipProps = {
  active?: any;
  payload?: any;
  label?: any;
};

export const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
  if (active && payload && payload.length) {
    const firstPayload = payload[0]; // Assuming payload is an array of objects
    const name = firstPayload?.payload?.name;

    return (
      <StyledCustomTooltip>
        <div>
          <p>{label}</p>
          {name && <div>Name: {name}</div>}
          {payload.map((pld, index) => (
            <StyledTooltipPayload key={index}>
              <div style={{ color: pld.fill }}>
                {pld.dataKey}: {pld.value}
              </div>
            </StyledTooltipPayload>
          ))}
        </div>
      </StyledCustomTooltip>
    );
  }

  return null;
};

      <Tooltip />
      <Legend />
      <Bar dataKey="pv" barSize={20} fill="#8884d8" name="My Bar Chart" />