IF/ELSE condition not working properly and Rerendring duplicates React

My goal here is to check a checkin and checkout date and see if a room is available or not

if availdata[p.roomId][date].i==0 then the room at that range of dates is not available so it will be displayed as not available

if not it will check its price with availdata[p.roomId][date].p1 and display it with a price instead

import React,{useState,useEffect} from 'react';
import HotelCards from './HotelCards';
import styles from '../styles/Options/Options.module.css';
import {Checkkout as checkkout}  from "./Hero";
import {Checkkin as checkkin}  from "./Hero";

import {format} from "date-fns";
let HC=[];
let prices =[];
let notavailableat="";
let rowss=[];
export default function Options({selectedGuest}) {
    const [availdata, setavailData] = useState([]);
    const [isLoading, setIsLoading] = useState(false);
    const [isLoading2, setIsLoading2] = useState(false);
    const [data, setData] = useState([]);

    // request Headers
    const requestOptions = {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },

    };
    const requestOptions2 = {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' },

    };


    //Get the rooms info along with the ID
    const fetchData = () => {
        fetch('http://localhost:3001/api/rooms', requestOptions)
            .then(response => response.json())

            .then((result) =>{
                    console.log("roooms"+result)
                    setData(result.rooms)
                    setIsLoading2(true);

                }

            )
            .catch((err) => console.log("error"));
    };

    useEffect(() => {
        fetchData();
    }, []);

    //get the i and p variables
    function fetchData1() {
        fetch('http://localhost:3001/api/availability', requestOptions2)
            .then(response => response.json())

            .then((result) =>{
                    setavailData(result.availability[0])

                    setIsLoading(true);


                }

            )
            .catch((err) => console.log("error"));
    }

    useEffect(() => {
        fetchData1();
    }, []);

    prices.length=0;
    var strToDatein = new Date(checkkin)
    var strToDateout = new Date(checkkout)

    {data.map(p=> {

    if (isLoading && isLoading2){

        for (var day = strToDatein; day <= strToDateout; day.setDate(day.getDate() + 1)) {
            

            var diplaydate = format(day,"dd  MMM ");

            var date = format(day, 'yyyyMMdd');


            if (availdata[p.roomId][date].i==0){

                rowss.push(<p key={availdata[p.roomId][date]}> not available at {diplaydate} </p>);
                notavailableat="not available at "+diplaydate;
                prices.length=0;
                console.log("room:"+p.roomId+"available?"+availdata[p.roomId][date].i)

                HC.push(<div key={p.roomId}>
                    <HotelCards
                        idroom={p.roomId}
                        title={p.roomName.toUpperCase()}
                        status={true}
                        price={prices}
                        img={p.pictures[0].url}
                        avail={notavailableat}
                        rows={rowss}
                        guest={selectedGuest}
                    /></div>)
                break;
            }
            else
            {
                rowss.length=0;
                prices.push(availdata[p.roomId][date].p1);
                console.log("room:"+p.roomId+"price?"+availdata[p.roomId][date].p1)

                HC.push(<div key={p.roomId}>
                <HotelCards
                    idroom={p.roomId}
                    title={p.roomName.toUpperCase()}
                    status={true}
                    price={prices}
                    img={p.pictures[0].url}
                    avail={notavailableat}
                    rows={rowss}
                    guest={selectedGuest}
                /></div>)



            }

        }
    }

    })

    return (
        <div className={`${styles.containers}`}>

            {HC}

        </div>
    );

}}

in my case it’s displaying each room 4 times with same price

Answer

Update : solution is

function format(date) {
        return `${date.getFullYear()}${`${date.getMonth()+1}`.padStart(2, 0)}${`${date.getDate()}`.padStart(2, 0)}`;
    }
    HC.length=0;

    data.forEach((p) =>{

        if (isLoading && isLoading2 ){

            for (var day = new Date(strToDatein); day < strToDateout; day.setDate(day.getDate() + 1)) {

                console.log(day + "dekhel for");

                var diplaydate = format(day,"dd  MMM ");

                var date = format(day, 'yyyyMMdd');

                if (availdata[p.roomId][date].i==0){

                    rowss.push(<p key={availdata[p.roomId][date]}> not available at {diplaydate} </p>);
                    notavailableat="not available at "+diplaydate;
                    console.log(+p.roomId+"not available at "+diplaydate)

                    HC.push(<div key={p.roomId}>
                        <HotelCards
                            idroom={p.roomId}
                            title={p.roomName.toUpperCase()}
                            status={true}
                            price={0}
                            img={p.pictures[0].url}
                            avail={1111}
                            rows={rowss}
                            guest={selectedGuest}
                        /></div>)


                    break;
                }
                else
                {console.log("dateeee"+ date);
                    rowss.length=0;
                    prices.length=0;
                    prices.push(availdata[p.roomId][date].p1);
                    var total_price = 0;
                    if(prices.length!==0){
                        for (var i=0;i<=prices.length-1;i++){
                            total_price+=parseFloat(prices[i]);
                        }

                    }
                    console.log("room:"+p.roomId+"price?"+availdata[p.roomId][date].p1)

                    HC.push(<div key={p.roomId}>
                        <HotelCards
                            idroom={p.roomId}
                            title={p.roomName.toUpperCase()}
                            status={true}
                            price={total_price}
                            img={p.pictures[0].url}
                            avail={1111}
                            rows={rowss}
                            guest={selectedGuest}
                        /></div>)



                }
                return (
                    <div className={`${styles.containers}`}>
                        {HC }
                    </div>
                );
            }

        }

    })