'HelmetProvider' is not a valid JSX element

I'm using typescript and react to develop dashboard. The code works fine in my laptop, but this error shows in pipeline, 'TypeScript error in App.tsx. HelmetProvider' is not a valid JSX element. Its instance type 'HelmetProvider' is not a valid JSX element. I tried all the solution found here but didn't work. I'm using nodejs version 16.4.2, react-helmet-async v 1.3.0, typescript version 4.4.2

Below is the code in App.tsx.

  import { Helmet, HelmetProvider } from "react-helmet-async";
  function App() {
  const content = useRoutes(routes);
  const { theme } = useTheme();
  // localStorage.removeItem("auth_session");
  const helmetContext = {};

  return (
    <HelmetProvider context={helmetContext}>
      {
        <Helmet
          titleTemplate="%s | Leelou Dashboard"
          defaultTitle="Leelou Admin Dashboard"
        />
      }
      <Provider store={store}>
        <StylesProvider jss={jss}>
          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <StyledEngineProvider injectFirst>
              <MuiThemeProvider theme={createTheme(theme)}>
                <ThemeProvider theme={createTheme(theme)}>
                  <AuthProvider>{content}</AuthProvider>
                </ThemeProvider>
              </MuiThemeProvider>
            </StyledEngineProvider>
          </LocalizationProvider>
        </StylesProvider>
      </Provider>
    </HelmetProvider>
  );
}