Why polygon does not show in react-map-gl?

Question

I have a polygon data in my map that I used react-map-gl for showing the map; I used Source and Layer to show my polygon but it shows nothing.

here is my codes, what is my problem?

const geojson = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {
          stroke: '#dc2e2e',
          'stroke-width': 2.1,
          'stroke-opacity': 1,
          fill: '#555555',
          'fill-opacity': 0.5,
        },
        geometry: {
          type: 'Polygon',
          coordinates: [polygonArea],
        },
      },
    ],
  }

const layerStyle = {
    type: 'fill',
    paint: {
      'fill-color': 'rgb(5, 30, 52)',
      'fill-opacity': 0.1,
    },
  }

return (
    <>
      <Map
        initialViewState={{
          longitude: initialCoordinate?.lng,
          latitude: initialCoordinate?.lat,
          zoom: 16,
        }}
        mapLib={maplibregl}
        // choose your style from https://help.map.ir/documentation/styles/
        mapStyle="https://map.ir/vector/styles/main/mapir-xyz-style.json"
        transformRequest={(url: string) => {
          return {
            url,
            headers: {
              'x-api-key': test,
            },
          }
        }}>
        <Source id="my-data" type="geojson" data={geojson}>
          <Layer {...layerStyle} />
        </Source>
      </Map>
    </>
  )