Recharts Line chart as imported functional component not rendering

Question

I have the following functional component that takes in some data and render a line chart. However depending on the type of data I would like to change the type of chart being used, i.e. (Line, Bar, etc).

As such I have a main component FieldCompareChart. This component determines what type of chart should be displayed based on the data graphs prop and determines if the yAxis should be on the left or right. It then renders the ResponsiveContainer and calls BuildYaxis as shown below.

I have the yAxis types is separate files as function components that return the type of chart being used. Having it this way does not render the lines in the graph.

However if I pass the contents of dbVhChart directly into the return statement of the if clause of the BuildYAxis function, this works. I am trying to understand why importing doesn't but the other does.

import React from "react";
import {
  LineChart,
  XAxis,
  CartesianGrid,
  Legend,
  ResponsiveContainer,
  ReferenceArea,
  YAxis,
  Line,
} from "recharts";

import axisConfigs from "./yAxisConfig.json";
import DbVhChart from "./yAxisTypes/dbVh";
import DbVvChart from "./yAxisTypes/dbVv";
import NdviChart from "./yAxisTypes/ndvi";

function BuildYaxis(props) {
  const { data, graphs, activeCrop, hideCrops } = props;
  return Object.keys(data[0])
    .filter((n) => ["date", "timestamp"].indexOf(n) === -1)
    .map((c, index) => {
      const sub = c.split("_").pop();
      const idx = graphs.findIndex((val) => val === sub);
      const chartProps = {
        idx,
        axisConfig: axisConfigs[sub],
        activeCrop,
        hideCrops,
        dataKey: c,
      };

      if (sub === "dbVv") {
        return <DbVvChart key={`dbVv-${index}`} {...chartProps} />;
      }

      return null;
    });
}

const FieldCompareChart = (props) => {
  const {
    data,
    activeCrop,
    setActiveCrop,
    hideCrops,
    toggleCrop,
    syncId,
    showLegend,
    left,
    right,
    refAreaLeft,
    refAreaRight,
    setRefAreaLeft,
    setRefAreaRight,
    zoom,
    zoomOut,
    graphs,
    top,
    bottom,
    top2,
    bottom2,
  } = props;

  if (data && data.length) {
    return (
      <div
        className="highlight-bar-charts"
        style={{ userSelect: "none", height: "calc(100vh - 100px)" }}
      >
        <button type="button" className="btn update" onClick={zoomOut}>
          Zoom Out
        </button>
        <ResponsiveContainer width="100%" height="92%">
          <LineChart
            data={data}
            onMouseLeave={() => setActiveCrop(null)}
            onMouseDown={(e) => {
              // this prevents an error from being thrown when the legend is clicked in the graphs
              if (!e) return;
              setRefAreaLeft(e);
            }}
            onMouseMove={(e) => {
              if (!e) return;
              refAreaLeft && setRefAreaRight(e);
            }}
            // eslint-disable-next-line react/jsx-no-bind
            onMouseUp={(e) => {
              // this prevents an error from being thrown when the legend is clicked in the graphs
              if (!e) return;
              if (!refAreaRight) {
                return setRefAreaLeft("");
              }
              zoom();
            }}
            syncId={syncId}
            width={500}
            height={300}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
              domain={[left, right]}
              allowDataOverflow
              dataKey="date"
              type="category"
              tickFormatter={(a) => {
                if (a === "auto") {
                  return a;
                }
                return new Date(a).toLocaleDateString();
              }}
            />
            {Object.keys(data[0])
              .filter((n) => ["date", "timestamp"].indexOf(n) === -1)
              .map((c, index) => {
                const sub = c.split("_").pop();
                const idx = graphs.findIndex((val) => val === sub);
                return (
                  <YAxis
                    key={`yAxis-key-${index}`}
                    allowDataOverflow
                    domain={idx === 0 ? [bottom, top] : [bottom2, top2]}
                    type="number"
                    yAxisId={idx}
                    tickFormatter={(a) => parseFloat(a).toFixed(1)}
                    orientation={idx === 0 ? "left" : "right"}
                  />
                );
              })}
            {showLegend && (
              <Legend
                onClick={toggleCrop}
                onMouseOver={(e) => setActiveCrop(e.dataKey)}
              />
            )}
            {BuildYaxis({ data, graphs, activeCrop, hideCrops })}
            {refAreaLeft && refAreaRight ? (
              <ReferenceArea
                yAxisId="1"
                x1={refAreaLeft}
                x2={refAreaRight}
                strokeOpacity={0.3}
              />
            ) : null}
          </LineChart>
        </ResponsiveContainer>
      </div>
    );
  }

  return null;
};

export default FieldCompareChart;

import React from "react";
import { Line } from "recharts";
import randomcolor from "randomcolor";

function DbVhChart(props) {
  console.log(props);
  const { idx, axisConfig, activeCrop, hideCrops, dataKey } = props;
  return (
    <Line
      key={`comparison-chart-${dataKey}`}
      yAxisId={idx}
      type="natural"
      animationDuration={300}
      connectNulls
      strokeDasharray={""}
      dataKey={dataKey}
      strokeWidth={activeCrop === null ? 1 : activeCrop === dataKey ? 3 : 1}
      stroke={randomcolor({
        luminosity: "bright",
        seed: axisConfig.seed,
        format: "rgba",
        alpha: activeCrop === null || activeCrop === dataKey ? 1 : 0.2,
      })}
      hide={hideCrops.indexOf(dataKey) >= 0}
    />
  );
}

export default DbVhChart;

Not working

...
function BuildYaxis(props) {
  const { data, graphs, activeCrop, hideCrops } = props;
  return Object.keys(data[0])
    .filter((n) => ["date", "timestamp"].indexOf(n) === -1)
    .map((c, index) => {
      const sub = c.split("_").pop();
      const idx = graphs.findIndex((val) => val === sub);
      const chartProps = {
        idx,
        axisConfig: axisConfigs[sub],
        activeCrop,
        hideCrops,
        dataKey: c,
      };

      console.log(`dbVv-${index}`);
      if (sub === "dbVv") {
        return <DbVvChart key={`dbVv-${index}`} {...chartProps} />;
      }

      return null;
    });
}
...

Working:

...
function BuildYaxis(props) {
  const { data, graphs, activeCrop, hideCrops } = props;
  return Object.keys(data[0])
    .filter((n) => ["date", "timestamp"].indexOf(n) === -1)
    .map((c, index) => {
      const sub = c.split("_").pop();
      const idx = graphs.findIndex((val) => val === sub);
      const chartProps = {
        idx,
        axisConfig: axisConfigs[sub],
        activeCrop,
        hideCrops,
        dataKey: c,
      };

      if (sub === "dbVv") {
        return (
          <Line
            key={`comparison-chart-${c}`}
            yAxisId={idx}
            type="natural"
            animationDuration={300}
            connectNulls
            strokeDasharray={""}
            dataKey={c}
            strokeWidth={activeCrop === null ? 1 : activeCrop === c ? 3 : 1}
            stroke={randomcolor({
              luminosity: "bright",
              seed: axisConfigs[sub].seed,
              format: "rgba",
              alpha: activeCrop === null || activeCrop === c ? 1 : 0.2,
            })}
            hide={hideCrops.indexOf(c) >= 0}
          />
        );
      }

      return null;
    });
}
...