nextjs server action never resolve when used in array.map

Question

I am rendering a list of posts and Article, there are 1 or 2 other components between them in the components tree.

   const Article = () => {
       const article = useQuery(articleServerAction)
     return <div>{article.data?.label}</div>
    }

    const Post = ({id}) => {
      const post = useQuery(() => postServerAction(id));
    return <div>{post.data?.message}</div>
    } 

rendering posts 1 by 1 is working!

   const App = () => {
       return (
         <main>
           <List>
            <Post id="1"/>
            <Post id="2"/>
            // even like this is working
            {[
              <Post key="3" id="3"/>, <Post key="4" id="4"/>
            ]}
           </List>
           ... some other components
           <Article />
         </main>
        )
    }

instead, when I render posts items in an array.map, the server action in the Article component will never be resolved. in fact, article.isLoading is always set to true! no response, no error!

    const App = () => {
       return (
         <main>
           <List>
            {[1, 2].map(id => <Post key={id} id={id}/>)}
           </List>
           ... some other components
           <Article />
         </div>
        )
    }

it looks like the array.map callback function is causing the other server action to break!!!! can someone help with this?

thanks