Reactjs 如何为redux连接的组件使用React延迟加载？

我对使用React.Lazy加载感到非常兴奋，但是我的组件正在使用redux，并且我收到了警告错误

js:1警告：函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你是想调用这个函数而不是返回它

下面是App.js的代码

import React, { Suspense } from 'react';
import queryString from 'query-string';
import { LoadingSpinner } from '../components/common';
import '../assets/styles.css';

const App = () => {
  const { target } = queryString.parse(window.location.search);
  const NewsComponent = React.lazy(() => import('../components/news/News'));
  const SchoolComponent = React.lazy(() =>
    import('../components/schools/Schools')
  );
  const CalendarComponent = React.lazy(() =>
    import('../components/calendar/Calendar')
  );

  return (
    <main className="max-w-md mx-auto font-display">
      <Suspense fallback={() => <LoadingSpinner />}>
        {target === 'news' && <NewsComponent />}
        {target === 'schools' && <SchoolComponent />}
        {target === 'calendar' && <CalendarComponent />}
      </Suspense>
    </main>
  );
};

export default App;

这是我连接到惰性负载的组件

import React, { useEffect, useState, MouseEvent } from 'react';
import { connect } from 'react-redux';
import { fetchNews } from '../../actions/news';
import NewsList from './NewsList';
import NewsTips from './NewsTips';
import { NewsType, StoreStateType } from '../../types';
import queryString from 'query-string';
import { Error } from '../common';

interface NewsProps {
  news: NewsType[];
  fetchNews(): void;
  isLoading: boolean;
  hasError: boolean;
}
interface NewsState {
  displayTips: boolean;
}

const News = (props: NewsProps, state: NewsState) => {
  const { news, isLoading, hasError, fetchNews } = props;
  const [displayTips, setDisplayTips] = useState(false);

  useEffect(() => {
    if (schools) {
      fetchNews();
    }

    showTips === 'true' ? setDisplayTips(true) : setDisplayTips(false);
  }, []);

  const styledImage = {
    backgroundImage:
      'url(https://engadinew-p65.test.schools.nsw.gov.au/content/dam/doe/sws/global/global-master/images/assets/school-finder.png)',
  };

  return (
    <section className="p-4">
      <h1 className="display-1 text-blue-dark mb-4">News</h1>
      {isLoading && <div>Loading</div>}
      {hasError && <Error />}
    </section>
  );
};

const mapStateToProps = ({
  news,
  isLoading,
  hasError,
}: StoreStateType): {
  news: NewsType[];
  isLoading: boolean;
  hasError: boolean;
} => {
  return { news, isLoading, hasError };
};

export default connect(mapStateToProps, { fetchNews })(News);

即使有警告也能投入生产吗？ 知道如何修复警告吗？

将此行更改为}>