@trincot thanks for the patience sir I'll try to explain my point as i can for anyone feeling unclear about my description of the question

First I have a custom component CollapsibleFilter which acts as a wrapper of Collapsible from shadcn/ui, by passing this component with children it will display the content of children when the collapsible is opened, e.g. when i write

<CollapsibleFilter title="foo">
hello world
</CollapsibleFilter>

it should show something like this in the browser(when you click the collapsible to open it)

now i created a react state variable called mapObj:

const [mapObj, setMap] = useState<Map<string, string>>();
useEffect(() => {
setMap(new Map([["John", "abc"]]));
}, []);

which is an object of type Map, and will be initialized with key value pair of ["John","abc"]

now when i write

<h2>outside of collapsible filter</h2>
{mapObj?.entries().map((kv) => {
        return (
          <div className="text-orange-400">
            <p>name:{kv[0]}</p>
            <p>tag:{kv[1]}</p>
          </div>
        );
})}

as i expected, the content of mapObj is displayed in the browser:

this is against @DipitSharma's answer where he states that react can't render the result returned from an iterator

and if i write(let's call this "test1")

<h2 className="text-red-800">
        using <code>Array.from(map.entries())</code>
</h2>
<CollapsibleFilter title="test1">
        {Array.from(mapObj?.entries() ?? []).map((kv) => {
          return (
            <div className="text-red-400">
              <p>name:{kv[0]}</p>
              <p>tag:{kv[1]}</p>
            </div>
          );
        })}
</CollapsibleFilter>

this also work as i expected, the content of mapObj is inside my CollapsibleFilter component, you can click to open the collapsible to see it:

However if i write(let's call this "test2")

<h2 className="text-blue-800">
  using <code>map.entries()</code>
</h2>
<CollapsibleFilter title="test2">
  {mapObj?.entries().map((kv) => {
    return (
      <div className="text-blue-300">
        <p>name:{kv[0]}</p>
        <p>tag:{kv[1]}</p>
      </div>
    );
  })}
</CollapsibleFilter>

against my expectation, when i click to open the collapsible there is nothing:

So why "test1" works but "test2" fails