错误Map

首先，pkgData.map中的嵌套Map是错误的。因为p本身不是数组。Map应该是这样的

{p.sources.map((c) => {
    ...
    }
  )}

JSX错误

第二，就像@大卫在评论中说的那样，由于JSX在后台的工作方式，您不能有多个顶级元素。例如，代码

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) => 
      <h3 key={p.name}>{p.name}</h3>                    
    )}
  </div>
</div>

相当于这个

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) => {
      return React.createElement("h3", {key: p.name}, p.name)
      }                    
    )}
  </div>
</div>

因此，如果在顶层返回多个JSX元素，React.createElement将无法工作。因此，你应该在顶层用一些标签 Package 这些东西，比如fragments（<>），div等。
比如说

<div className="mainApp">
  <div className="pkgsList">
    {pkgData.map((p) =>
      <>
        <h3 key={p.name}>{p.name}</h3>
        {p.sources.map((c) => 
          <p>{c.something}</p>
        )} 
      </>
    )}
  </div>
</div>

仅供参考：https://react.dev/reference/react/createElement#creating-an-element-without-jsx

在map中只能返回1个jsx元素，就像在普通组件中一样。如果你想在map函数中呈现多个元素，你可以把代码 Package 在一个react片段中，如下所示：

<div className="mainApp">
    <div className="pkgsList">
        {pkgData.map((p) => (
            <> {/* <- this is a fragment */}
                <h3 key={p.name}>{p.name}</h3>
                {p.sources.map((s) => (
                    <>{/* render source here */}</>
                ))}
            </>
        ))}
    </div>
</div>