How to integrate DeckGL with react typescript?

Trying to use deckgl react with typescript. however wasn't work well and I am facing issue. Anyone know how to fix this ?

'DeckGL' cannot be used as a JSX component. Its instance type 'DeckGL<ContextProviderValue>' is not a valid JSX element. The types returned by 'render()' are incompatible between these types. Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'. Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

import DeckGL from '@deck.gl/react';



  return (
    <Container>
      <DeckGL
        initialViewState={INITIAL_VIEW_STATE}
        controller={{ doubleClickZoom: false }}
        onClick={onLayerClick}
        layers={[layers]}
        getCursor={layers.getCursor.bind(layers)}
      >
        <Map
          style={{ width: '100%', height: '100%' }}
          mapStyle="mapbox://styles/mapbox/streets-v11"
          mapboxAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN || ''}
        >
          <NavigateButton />
        </Map>
      </DeckGL>
    </Container>
  );
};

export default MapEdit;

import DeckGL from '@deck.gl/react/typed';