Javascript – useState array type returns undefined instead of empty array

I have an issue with my admin dashboard partly I have not done a thing like this before but essentially I am trying to get ready data that ant design graphs will use. This data is coming from mongodb through redux useSelector. Then I map the data and store it in useState of array type

  const [data, setdata] = React.useState([]);
  const [reference, setreference] = React.useState([]);
  const [orderActivity, setorderActivity] = React.useState([]);
  const {
    dataStreamMonthly = [],
    user,
    orders = [],
  } = useSelector((state) => state.auth) ?? {};
  React.useEffect(() => {
    dispatch(getMonthlyRevenue(user.refreshToken));
    dispatch(getOrders(user.refreshToken));
  }, [dispatch]);
  React.useEffect(() => {
    let monthList = [
      "N/A",
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];
    const source =
      dataStreamMonthly &&
      dataStreamMonthly.map((stage) => {
        const monthName = stage._id.month
          ? monthList[parseInt(stage._id.month)]
          : "N/A";
        return { type: monthName, revenue: stage.amount };
      });
    setdata(source);
    
  }, [dataStreamMonthly, orders]);

Now the issue is when the component initially renders data is null but that should not be the case since data is an array. So this is where I use it for the graph.

const config1 = {
    data,
    xField: "type",
    yField: "revenue",
    color: ({ type }) => {
      return "#ffd333";
    },
    label: {
      // 可手动配置 label 数据标签位置
      position: "middle",
      // 'top', 'bottom', 'middle',
      // 配置样式
      style: {
        fill: "#FFFFFF",
        opacity: 0.6,
      },
    },
    xAxis: {
      label: {
        autoHide: true,
        autoRotate: false,
      },
    },
    meta: {
      type: {
        alias: "Month",
      },
      sales: {
        alias: "Revenue",
      },
    },
  };

And subsequently render it

<div>
   <Column {...config1} />
</div>

I keep getting data is not defined so I conditionally render based on data

<div>
   data.length && <Column {...config1} />
</div>

Still get the error data is not defined. Please help for I am out of options