D3. js привязка ключа data ()

Question

Это мое первое время использования D3.js для построения гистограммы внутри приложения React. Мой компонент довольно прост: он получает данные и должен нарисовать гистограмму. Я хочу добавить ключи к своим барам, но когда я пытаюсь сделать это в функции data(), происходит сбой при => entry.item

Объект типа «неизвестен». TS2571

...
 svg
      .selectAll(".bar")
      .data( data, entry => entry.item )
      .join("rect")
...

My data относится к этому типу:

export interface DataFormat {
  item: string;
  region: string;
  data: number;
}

Я не понимаю, что я делаю неправильно, поскольку определение типа для data() показывает :

data<NewDatum>(data: NewDatum[], key?: ValueFn<GElement | PElement, Datum | NewDatum, string>): Selection<GElement, NewDatum, PElement, PDatum>;

UPD: Вот как определяется data

export interface ChartProps {
  data: DataFormat[];
}

export const Chart = (props:ChartProps) => {
  const { data } = props;

, а в родительском компоненте он передается как проп:

export const Wrapper = () => {
  const [currentYear, setCurrentYear] = useState<number>(INITIAL_YEAR);
  const [dataMax, setDataMax] = useState<number>(0);
  const [data, setData] = useState<DataFormat[]>(initialData);

  useEffect(() => {
    if( currentYear <= FINAL_YEAR ) {
      setTimeout(() => setCurrentYear(currentYear+1), 200);
    }
  }, [currentYear]);

  useEffect(() => {
    const data: DataFormat[] = populationData.data
      .map((dataitem) => {
        return {
          item: dataitem.item,
          data: dataitem.data[currentYear],
          region: dataitem.region,
          image: dataitem.image,
        };
      })
      .sort((a, b) => b.data - a.data)
      .slice(0, TOP);
    setData(data);
    setDataMax(Math.max(...data.map((item) => item.data)));
  }, [currentYear]);

  return (
    <Chart data={data} />
  );
};