mapped data is not shown on screen in react native

I am getting response from api:

{"data": {        // other stuff"time_breakup": {"break_timings": [                {"break_in_time": "2021-11-18T05:32:35.747Z","break_out_time": "2021-11-18T05:32:47.871Z"                },                {"break_in_time": "2021-11-18T06:21:35.740Z","break_out_time": "2021-11-18T06:21:39.909Z"                }            ],        },    },"success": true}

I am using below function to get response from api:

const [shift, setShift]: any = useState();const getShiftDetails = useCallback(() => {    ApiFunctions.get('shift/'+ ID)        .then(async resp => {            if (resp) {                setShift(resp.data); // saving the response in state                // some work            } else {                Alert.alert('Error', resp);            }        })        .catch((err: any) => {            console.log(err);        });}, []);useEffect(() => {    getShiftDetails();}, [getShiftDetails, ID]);

So I have saved the response in a state shift

Now I wanted to map this state to display the time on screen:

<View>    {shift.time_breakup.break_timings.map((item: any, index: any) => {    console.log(item.break_in_time),<><View><Text>{item.break_in_time}</Text><Text>{item.break_out_time}</Text></View></>;    })}</View>

But I am not able to see <Text>{item.break_in_time}</Text> on screen, and also in console I am getting an infinite loop of time:

console.log :

2021-11-18T05:32:35.747Z2021-11-18T06:21:35.740Z2021-11-18T05:32:35.747Z2021-11-18T06:21:35.740Z2021-11-18T05:32:35.747Z2021-11-18T06:21:35.740Z2021-11-18T05:32:35.747Z

this is on infinite loop

I don't know what I am doing wrong