I'm developing a console-like web application. When the user inputs something, a component is appended in a childrens element that is a prop of a <ConsoleOutput> component; for example, when the user inputs 'chatrooms list', a <ChatroomList> component is created:

const [childrens, setChildrens] = useState([]);

/* Switch that analizes input */
case 'chatrooms list':
        setChildrens(childrens => {
          return (
            [...childrens,
            <ChatroomList chatrooms={chatrooms} />]
          );
        });
        break;

So in the App I return this:

return (
    <div className='container-fluid'>
      <Header />
      <ConsoleOutput childrens={childrens} />
      <CommandInput onSubmit={processCommand} />
    </div>
  );

This is working great, the components get appended properly on input and reflected on screen (is re-rendering on change); the thing is, this childrens aren't getting re-rendering on change, for example, <ChatroomList> that takes a chatrooms prop.

This prop is getting updated constantly with an useEffect hook:

  useEffect(() => {
    const getChatrooms = async () => {
      const response = await fetchChatrooms();
      if (response.success) {
        const serverChatrooms = response.chatrooms;
        setChatrooms(serverChatrooms);
      }
    }

    getChatrooms();
  }, [chatrooms]);

So if the user inputs chatrooms list, this <ChatroomList> component is created and displayed on screen, but if the chatrooms prop changes, I have to create again the component or reload the page to see the changes.

I suspect that this is because this component is a child component of <ConsoleOutput>, but I'm not sure.