Why are a functional component's child component's props using outdated state?

I am actually using Next JS but its the same. i have simplified the code and removed the irrelevant part.

What i am building is a form where i can add new fields (child component) dynamically but the default will be 1 and there must always be minimum 1 field.

Parent.js

import {useState, useEffect} from 'react'
import Rooms from './Rooms'

export default function TourOverview(props) {
   const [roomList, setRoomList] = useState([])

   useEffect(()=>{  // add one room as default that cant be removed
        setRoomList([<Rooms addRoomCount={addRoomCount} id={1} key={1} />])
    }, [])

    const addRoomCount=()=> {
        let tempArr = roomList //shallow copy
        tempArr.push(<Rooms removeRoomCount={removeRoomCount} id={roomList.length+1} key={roomList.length+1} />)
        setRoomList([...tempArr])
    }

    const removeRoomCount=(id)=>{
       // will leave empty as not relevant
    }

    return (
        <>
          {roomList}
        </>
    )

Child.js

import {useState, useEffect} from 'react'
export default function Rooms(props, ref) {

   return (
         <>
           Room {props.id}
           {props.addRoomCount != undefined ? <button type="button" className="btn btn-link"  onClick={props.addRoomCount}>
                + Add Room
            </button> : 
                <button type="button" className="btn btn-link" onClick={()=>props.removeRoomCount(props.id)}>
                    - Remove
                </button>
            }
    </>
)

From the code you can see that as the parent component loads for the first time it will automatically add a child component that has the "add room" button, the others added later will have only "remove" button.

This doesnt work, it looks ok initially, but the moment you click on "add room" button, the roomList state gets reset to the state when the one time useEffect was initially loaded, which is...empty.

In another words, the addRoomCount() assigned as a prop to the first <Rooms/>, is using the state roomList during the initial load when its still empty, its like a time machine.

I tried the class component version of this and it works. So its only functional component wont work.

Anyone can explain why?

Don't store JSX in state. Instead, use the state to create the elements to render.

In this case, it suffices to store the array of ids as state.

const [roomList, setRoomList] = useState([1]);
const addRoomCount = () => setRoomList([...roomList, roomList.length + 1]);
// ...
return roomList.map(i => <Room addRoomCount={addRoomCount} id={i} key={i}
			removeRoomCount={i ? removeRoomCount : undefined} />);