i am havinf this : parent componetn which are getting data from api as : 

{
    "visit_status": "completed",
    "actual_visit_date": "16 Jun 2025",
    "visit_datetime": "05 Jun 2025",
    "date_of_creation": "03 Jun 2025",
    "house_type": "high-riser",
    "mdpe_pipeline_length": 12,
    "riser_length": 12,
    "gi_pipeline_length": 12,
    "meter_type": "smart",
    "documents": [
        {
            "file_name": "1749105259316-isometric.jpg",
            "file_path": "customer/cus_461/lmc_supervisor/commissioning",
            "file_type": "jmr"
        },
        {
            "file_name": "1749105259384-pipeline.jpg",
            "file_path": "customer/cus_461/lmc_supervisor/commissioning",
            "file_type": "jmr-customer-approval"
        },
        {
            "file_name": "1749105259403-additional.jpg",
            "file_path": "customer/cus_461/lmc_supervisor/commissioning",
            "file_type": "natural-gas-consent"
        }
    ]
}

i want to parse the data in such a way that the child component pipeline details will able to have that, 

i dont want to change the child component but want to parse the api response 

here are components :


import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import apiClient from "src/apiClient/apiClient";

import PipelineDetails from "src/tpi/Component/PipelineDetails";
import { RootState } from "store";

const FeasibilityDetailsTab = ({ mapped_lmc_connection_stage_id }) => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState({});
  const { customer } = useSelector((state: RootState) => state.customerData);

  useEffect(() => {
    if (!mapped_lmc_connection_stage_id) return;

    apiClient
      .post("/tpi/get-feasibility-details-tpi", {
        mapped_lmc_connection_stage_id: mapped_lmc_connection_stage_id,
      })
      .then((res) => {
        const result = res.data ?.data|| {};

        setData(result);
        setLoading(false);
      })
      .catch((error) => {
        console.error("API Error:", error);
        setLoading(false);
      });
  }, [customer]);

  if (loading) return <p>Loading...</p>;

  return <PipelineDetails data={data} />;
};

export default FeasibilityDetailsTab;


import React from "react";
import { Box, Grid, Typography, Paper } from "@mui/material";
import ImageDisplay from "./ImageDisplay";

const FileDisplay = ({ data, type, label }) => {
  const file = data?.trx_lmc_pipeline_files?.find((d) => d.file_type === type);
  return (
    <Grid item xs={12} sm={6}>
      <Typography variant="body2" color="text.secondary" mb={2}>
        {label}
      </Typography>
      <Paper>
        {file ? (
          <ImageDisplay fileName={file.file_name} file_path={file.file_path} />
        ) : (
          <Typography>No {label.toLowerCase()} found</Typography>
        )}
      </Paper>
    </Grid>
  );
};

const PipelineDetails = ({ data }) => {
  console.log(data);

  return (
    <Box sx={{ padding: "24px", backgroundColor: "#FFFFFF" }}>
      <Grid container spacing={4}>
        {/* First row */}
        <Grid item xs={12} sm={3}>
          <Typography variant="body2" color="text.secondary">
            Actual visit date
          </Typography>
          <Typography variant="body1" fontWeight={500}>
            {data.visitDate}
          </Typography>
        </Grid>
        <Grid item xs={12} sm={9}>
          <Typography variant="body2" color="text.secondary">
            Date of creation
          </Typography>
          <Typography variant="body1" fontWeight={500}>
            {data.date_of_creation}
          </Typography>
        </Grid>

        {/* Second row */}
        <Grid item xs={12} sm={3}>
          <Typography variant="body2" color="text.secondary">
            House type
          </Typography>
          <Typography variant="body1" fontWeight={500}>
            {data.houseType}
          </Typography>
        </Grid>
        <Grid item xs={12} sm={3}>
          <Typography variant="body2" color="text.secondary">
            MDPE pipeline length: Ground connectivity (in metres)
          </Typography>
          <Typography variant="body1" fontWeight={500}>
            {data.mdpeLength}
          </Typography>
        </Grid>
        <Grid item xs={12} sm={3}>
          <Typography variant="body2" color="text.secondary">
            Riser length (in metres)
          </Typography>
          <Typography variant="body1" fontWeight={500}>
            {data.riserLength}
          </Typography>
        </Grid>
        <Grid item xs={12} sm={3}>
          <Typography variant="body2" color="text.secondary">
            GI pipeline length without riser (in metres)
          </Typography>
          <Typography variant="body1" fontWeight={500}>
            {data.giLength}
          </Typography>
        </Grid>

        {/* Third row - file displays */}
        <FileDisplay
          data={data}
          type="customer-consent"
          label="Customer consent"
        />
        <FileDisplay
          data={data}
          type="isometric-drawing"
          label="Isometric drawing"
        />
      </Grid>
    </Box>
  );
};

export default PipelineDetails;