I am fetching data through rtk query in Next js . In network tab it showing actual data .
But when i log the data in first render it shows actual data but in second render it shows object object in next js.

"use client"
import { companyInformation } from '@/contents/companyInformation';
import { useGetSingleBillQuery } from '@/lib/features/Invoice/invoiceApi';
import React, { useEffect, useState } from 'react';
import BillTable from './BillTable';
import Loading from '@/components/utils/Loading';

const BillStatement = ({ id }) => {
   
    const { data: bill, isLoading, isError } = useGetSingleBillQuery(id);

    if (isLoading) {
        return <Loading />;
    }

    if (isError ) {
        console.log('error happend')
        return <div>Error loading bill data.</div>;
    }
    console.log(bill)
   

    return (
        <div>
            This is Bill Statement {id}
            <section className='backgroundWaterMark'>
                <div className='leading-4 text-black timesNewRoman'>
                    <div className="mx-2 flex justify-around">
                        <nav className='flex flex-col justify-center'>
                            <div className="flex justify-center items-center">
                                <img src="https://i.postimg.cc/FKc8pPqQ/tertiary.jpg" alt="" className="h-[68px] w-[65px] pt-[7px]" />
                                <h2 className='text-center text-4xl font-bold timesNewRoman piHeading'>{companyInformation?.name}</h2>
                            </div>
                            <h5 className='text-center text-md italic piHeading timesNewRoman mt-1'>{companyInformation?.intro}</h5>
                        </nav>
                    </div>
                    <h1 style={{ width: '100%', height: '1px', backgroundColor: 'black', margin: "2px", marginBottom: '4px' }} className="mt-2"></h1>
                    <h1 style={{ width: '100%', height: '1px', backgroundColor: 'black' }}></h1>
                    <div className='flex justify-between mt-2'>
                   
                    </div>
                </div>
                <BillTable data={bill} />
            </section>
        </div>
    );
};

export default BillStatement;

I need to show actual data array of object in every render .