React Functional Component UseEffect not

I'm relatively new to React and I'm trying to build a Candlestick chart using a functional component here:

import React, { useEffect, useState } from "react";
import { getPrices } from "../../api/ohlcv";
import { ohlcv } from "../../types/ohlcv";
import "../../assets/css/Component.scss";
import {
  ChartCanvas,
  Chart,
  CandlestickSeries,
  OHLCTooltip,
  CrossHairCursor,
  BarSeries,
  EdgeIndicator,
  XAxis,
  YAxis,
} from "react-financial-charts";
import { scaleTime } from "d3-scale";
import { format } from "d3-format";
import { timeFormat } from "d3-time-format";

type chartOhlcv = {
  date: Date;
  open: number;
  high: number;
  low: number;
  close: number;
  volume: number;
};

interface CandlestickProps {
  coin: ohlcv;
}

const coinPrices: chartOhlcv[] = [];

const Candlestick = (props: CandlestickProps) => {
  const [prices, setPrices] = useState(coinPrices);

  useEffect(() => {
    getPrices(props.coin.coin).then((data: ohlcv[]) => {
      const transformedPrices: chartOhlcv[] = data
        .map((singleOhlcv) => ({
          date: new Date(singleOhlcv.closeTime * 1000),
          open: singleOhlcv.open,
          high: singleOhlcv.high,
          low: singleOhlcv.low,
          close: singleOhlcv.close,
          volume: singleOhlcv.volume,
        }))
        .sort((p1, p2) => (p1.date < p2.date ? -1 : 1));
      setPrices(transformedPrices);
    });
  }, [props.coin]);

  const xAccessor = (d: chartOhlcv) => d.date;
  const start = xAccessor(prices[Math.max(0, prices.length - 49)]);
  const end = xAccessor(prices[prices.length - 1]);
  const xExtents = [start, end];

  const candleChartExtents = (data: ohlcv) => {
    return [data.high, data.low];
  };
  const barChartExtents = (data: ohlcv) => {
    return data.volume;
  };

  const volumeSeries = (data: ohlcv) => {
    return data.volume;
  };

  const barChartHeight = 200 / 4;
  const barChartOrigin = (_: any, h: number) => [0, h - barChartHeight];

  const yEdgeIndicator = (data: ohlcv) => {
    return data.close;
  };
  const pricesDisplayFormat = format(".2f");

  const dateTimeFormat = "%B %d, %Y";
  const timeDisplayFormat = timeFormat(dateTimeFormat);

  return (
    <ChartCanvas
      height={200}
      ratio={3}
      width={400}
      margin={{ left: 0, right: 0, top: 0, bottom: 0 }}
      seriesName={`OHLCV prices - ${props.coin}`}
      data={prices}
      xScale={scaleTime()}
      xAccessor={xAccessor}
      xExtents={xExtents}
    >
      <Chart
        id={2}
        height={barChartHeight}
        origin={barChartOrigin}
        yExtents={barChartExtents}
      >
        <BarSeries yAccessor={volumeSeries} />
      </Chart>
      <Chart yExtents={candleChartExtents}>
        <EdgeIndicator
          itemType="last"
          // rectWidth={margin.right}
          // fill={openCloseColor}
          // lineStroke={openCloseColor}
          // displayFormat={pricesDisplayFormat}
          yAccessor={yEdgeIndicator}
        />
        <XAxis showGridLines ticks={12} tickFormat={timeDisplayFormat} />
        <YAxis showGridLines ticks={4} tickFormat={pricesDisplayFormat} />

        <CandlestickSeries />
        <OHLCTooltip origin={[8, 16]} />
      </Chart>
      <CrossHairCursor />
    </ChartCanvas>
  );
};

export default Candlestick;

The code compiles fine, but when I try to open it in my browser, I get an error for the following line: const xAccessor = (d: chartOhlcv) => d.date;

stating that TypeError: Cannot read properties of undefined (reading 'date')

I'm wondering what I've missed/why it is seemingly undefined when my useEffect is supposed to be setting it.

It seems like the useEffect might not be getting called? I'm not sure if I've done it right.