Unable to fetch and preload post data using Rest Api in WordPress Multisite

I have a multisite setup in which both main site and subsite is using same theme. On the index.php page it should show 3 post per page using query loop. The posts are displayed on the main site but it is not being fetched on the subsite.

I am using a different approach to show the post data without loading the page. for which I have used lightbox. when the plus icon is clicked lightbox is opened and shows the post data. it works on the main site but on subsite it does not fetch data in the lightbox.

main domain: https://www.bahai.in/
subsite: https://www.bahai.in/hi (data not fetched)

github directory: https://github.com/Trushar10/bahaiindia2024

Below is the code
index.php:

<div class="featured-stories">
                <div class="story-cards">
                    <?php
                    // Query to get 3 posts per page
                    query_posts('posts_per_page=3');

                    if (have_posts()) {
                        while (have_posts()) {
                            the_post();

                            get_template_part('template-parts/posts/content-stories');
                        }
                    }

                    // Reset Query
                    wp_reset_query();
                    ?>

                </div>
                <div class="light-box">
                    <div class="box-wrapper">
                        <div class="box">
                            <span class="close-btn">&times</span>
                            <h2></h2>
                            <!-- <p class="box-excerpt"></p> -->
                            <img src="" alt="" class="light-img" />
                            <p class="box-content"></p>
                        </div>
                    </div>
                </div>
            </div>

content-stories template:

<div>
    <figure>
        <div class="overlay"></div>
        <?php the_post_thumbnail(); ?>
    </figure>
    <div class="card-content">
        <h2><?php the_title(); ?></h2>
        <!-- <?php the_excerpt(); ?> -->
    </div>
    <?php $featured_img_url = get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>
    <span class="close-btn view-btn" data-post-id="<?php the_ID(); ?>" data-src="<?php echo esc_url($featured_img_url); ?>">+</span>
</div>

function.php

// Add an action to handle the Ajax request
add_action('wp_ajax_get_post_data', 'get_post_data');
add_action('wp_ajax_nopriv_get_post_data', 'get_post_data');

function get_post_data()
{
  $post_id = $_POST['post_id'];

  // Get the post data by ID
  $post = get_post($post_id);

  if ($post) {
    $response = array(
      'title' => $post->post_title,
      'excerpt' => get_the_excerpt($post_id),
      'content' => apply_filters('the_content', $post->post_content),
    );

    echo json_encode($response);
  }

  wp_die();
}

app.js

// Lightbox
let lightImg = document.querySelector('.light-img');
let viewBtn = document.querySelectorAll('.view-btn');
let lightboxTitle = document.querySelector('.light-box h2');
// let lightboxExcerpt = document.querySelector('.box-excerpt');
let lightboxContent = document.querySelector('.box-content');

// Create an object to store post data
const postData = {};

// Preload data for all view buttons
viewBtn.forEach((el) => {
    const postId = el.getAttribute('data-post-id');
    const imgSrc = el.getAttribute('data-src');

    // Use the REST API to fetch post data in the background
    fetch(`/wp-json/wp/v2/posts/${postId}`)
        .then((response) => response.json())
        .then((data) => {
            postData[postId] = {
                title: data.title.rendered,
                // excerpt: data.excerpt.rendered,
                content: data.content.rendered,
                imgSrc: imgSrc,
            };
        });
});

viewBtn.forEach((el) => {
    el.addEventListener('click', (event) => {
        event.preventDefault(); // Prevent the default behavior of the anchor tag

        document.body.classList.add('effect');
        let postId = el.getAttribute('data-post-id');
        let imgSrc = postData[postId].imgSrc;

        lightImg.src = imgSrc;
        lightboxTitle.textContent = postData[postId].title;
        // lightboxExcerpt.innerHTML = postData[postId].excerpt;
        lightboxContent.innerHTML = postData[postId].content;
    });
});

window.addEventListener('click', (event) => {
    if (
        event.target.className == 'box-wrapper' ||
        event.target.className == 'close-btn'
    ) {
        document.body.classList.remove('effect');
    }
});

I used the chatgpt to solve the issue in which it suggested to use switch_to_blog(subsite-ID) in which the subsite ID is 3. I tried the code provided but it did not work either.

also checked the /wp-json/wp/v2/posts/${postId} in which the postId is 899.

you check it that the data is being fetched at https://www.bahai.in/hi/wp-json/wp/v2/posts/899.

but in console it shows:

{"code":"rest_post_invalid_id","message":"Invalid post ID.","data":{"status":404}}

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rendered')

Uncaught TypeError: Cannot read properties of undefined (reading 'imgSrc').

It will be helpful to if you can provide the learning to fix this issue.