How to write if else statement in reactJS when using useEffect?

Following is the code I’m using to return the Plotly graph, What I need to do in here is I need to return a message or different layout when the graph data is empty or there is nothing to show on the graph. use a default content like no data available if no data for charts. How do I do that?

import React, { useEffect } from "react";
import Plot from "react-plotly.js";
import PropTypes from "prop-types";

let dataArray;
let index;
let obj;
function PlotlyStackedChart({ labels, data, xTitle, yTitle, mainTitle, preHeading }) {
  useEffect(() => {
    dataArray = [];
    for (index = 0; index < data.length; index += 1) {
      obj = {
        x: labels,
        y: data[index].data,
        type: "bar",
        name: data[index].name,
      };
      dataArray.push(obj);
    }
  }, [data]);
  return (
    <>
      <Plot
        data={dataArray}
        layout={{
          barmode: "stack",
          autosize: true,
          title: {
            text: preHeading + mainTitle,
            y: 0.9,
          },
          margin: {
            t: 225,
          },
          xaxis: {
            // all "layout.xaxis" attributes: #layout-xaxis
            title: {
              text: xTitle,
              font: {
                family: "Arial Black",
              },
            }, // more about "layout.xaxis.title": #layout-xaxis-title
            // dtick: 1,
          },
          yaxis: {
            // all "layout.yaxis" attributes: #layout-yaxis
            title: {
              text: yTitle,
              font: {
                family: "Arial Black",
              },
            }, // more about "layout.yaxis.title": #layout-yaxis-title
          },
          font: {
            // family: "Courier New, monospace",
            size: 12,
            color: "#7f7f7f",
          },
          legend: {
            bgcolor: "transparent",
            x: 0,
            y: 1.4,
            xanchor: "auto",
            traceorder: "normal",
            orientation: "h",
          },
          marker: { size: 40 },
        }}
        useResizeHandler
        style={{ width: "100%", height: 600 }}
      />
    </>
  );
}

export default PlotlyStackedChart;

PlotlyStackedChart.defaultProps = {
  xTitle: "",
  yTitle: "",
  mainTitle: "",
  preHeading: "",
};

// Typechecking props for the MDDatePicker
PlotlyStackedChart.propTypes = {
  labels: PropTypes.oneOfType([PropTypes.string, PropTypes.array]).isRequired,
  xTitle: PropTypes.string,
  yTitle: PropTypes.string,
  mainTitle: PropTypes.string,
  preHeading: PropTypes.string,
  data: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).isRequired,
};

explaining further, If there is no data to plot in the graph I want to return the following code else the current one which retrieves the data and plot in the graph.

return {
    "layout": {
        "xaxis": {
            "visible": false
        },
        "yaxis": {
            "visible": false
        },
        "annotations": [
            {
                "text": "No matching data found",
                "xref": "paper",
                "yref": "paper",
                "showarrow": false,
                "font": {
                    "size": 28
                }
            }
        ]
    }
}