react-leaflet GeoJSON with typescript - reactjs

Question

I am pretty new using typescript with reactjs. Currently, the project I am working on is using a react-leaflet/leaflet specifically their GeoJSON component. I am running into a typescript error when I pass my data to the props.
I have been doing some research on this, even installed the geojson package and followed their examples, https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/geojson/geojson-tests.ts, tried everything that I know but no luck.
If I try to pass data as
const GeoJsonData: geojson.Feature<geojson.Polygon, geojson.GeoJsonProperties> = {
geometry: {
coordinates: [[
[20.7325804014456, -156.424372312952],
[20.7320799340775, -156.424348923897],
[20.732046895414, -156.425191022255],
[20.7321183621394, -156.425194200455],
[20.7321078658074, -156.425458542909],
[20.7325370751528, -156.425476608985],
[20.7325804014456, -156.424372312952]
]],
type: 'Polygon',
},
properties: {
name: 'some name'
},
type: 'Feature',
};
or
const GeoJsonData: = {
geometry: {
coordinates: [[
[20.7325804014456, -156.424372312952],
[20.7320799340775, -156.424348923897],
[20.732046895414, -156.425191022255],
[20.7321183621394, -156.425194200455],
[20.7321078658074, -156.425458542909],
[20.7325370751528, -156.425476608985],
[20.7325804014456, -156.424372312952]
]],
type: 'Polygon',
},
properties: {
name: 'some name'
},
type: 'Feature',
} as as geojson.GeoJsonObject;
I get this error
Conversion of type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' to type 'GeoJsonObject' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352)
Conversion of type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' to type 'GeoJsonObject' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Property 'type' is missing in type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' but required in type 'GeoJsonObject'.
But If I remove types from data. Then I get this error.
const GeoJsonData: = {
geometry: {
coordinates: [[
[20.7325804014456, -156.424372312952],
[20.7320799340775, -156.424348923897],
[20.732046895414, -156.425191022255],
[20.7321183621394, -156.425194200455],
[20.7321078658074, -156.425458542909],
[20.7325370751528, -156.425476608985],
[20.7325804014456, -156.424372312952]
]],
type: 'Polygon',
},
properties: {
name: 'some name'
},
type: 'Feature',
}
No overload matches this call.
Overload 1 of 2, '(props: Readonly<GeoJSONProps>): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error.
Property 'type' is missing in type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' but required in type 'GeoJsonObject'.
Overload 2 of 2, '(props: GeoJSONProps, context?: any): GeoJSON<GeoJSONProps, GeoJSON<any>>', gave the following error.
Type '{ properties: { name: string; } | { name: string; }; type: "Feature"; geometry: Polygon | null; id?: string | number | undefined; bbox?: BBox2d | BBox3d | undefined; }[]' is not assignable to type 'GeoJsonObject'.
<Map
center={[props.centerMapCoordinates.lat, props.centerMapCoordinates.lng]}
zoom={props.centerMapCoordinates.zoom}
style={{ height: mapHeight }}
onMoveEnd={(event: any) => props.getZoomMap(event)}
>
<TileLayer url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}/"
/>
<GeoJSON
key={GeoJsonData}
data={GeoJsonData}
// data={GeoJsonData}
onEachFeature={(feature, layer) => {
layer.on('click', (e) => {
console.log(e.target.feature);
// new Field().doesIntersect(e.target.feature);
});
if (props.centerMapCoordinates.zoom > 16) {
layer.bindTooltip(feature.properties.name, {
direction: 'center',
permanent: true,
}).openTooltip();
} else {
layer.closeTooltip();
}
layer.bindPopup(feature.properties.name);
}}
/>
</Map>
Note: If I add as any to GeoJsonData it gets rid of the errors, but then does not make any sense to use typescript.
Does anyone familiar with this issue or knows how can I define geojson types?
Please let me know if you have any questions. I can provide more details if needed. Thank you in advance.