next.js：函数作为React子元素无效

如何解决next.js：函数作为React子元素无效

我尝试在我的页面上使用react-countdown，尽管有一些react-dom.development.js:88 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.之类的注释，但它仍然有效 这是我的完整代码

import Head from 'next/head'
import React from "react"
import Countdown from "react-countdown"
import {Container,Button,Row,Col,Form,FormControl,InputGroup} from 'react-bootstrap'

class Home extends React.Component {
  render() {
  // Random component
  const Completionist = () => <span>You are good to go!</span>;

  const styleCol = {
    textAlign: 'center',color: 'grey',fontSize: '82px',fontWeight: 600,display: 'grid',fontFamily: 'VERDANABOLD'
  }

  const styleColSpan = {
    color: 'white',fontSize: '16px'
  }

  // Renderer callback with condition
  const renderer = ({ days,hours,minutes,seconds,completed }) => {
    if (completed) {
      // Render a complete state
      return <Completionist />;
    } else {
      // Render a countdown
      return (
        <>
          <Col style={styleCol} className={style.clockFrame} lg={3} md={12} sm={12} xs={12}>{days} <span style={styleColSpan}>DAYS</span></Col>
          <Col style={styleCol} className={style.clockFrame} lg={3} md={12} sm={12} xs={12}>{hours} <span style={styleColSpan}>HOURS</span></Col>
          <Col style={styleCol} className={style.clockFrame} lg={3} md={12} sm={12} xs={12}>{minutes} <span style={styleColSpan}>MINS</span></Col>
          <Col style={styleCol} className={style.clockFrame} lg={3} md={12} sm={12} xs={12}>{seconds} <span style={styleColSpan}>SEC</span></Col>
        </>
      );
    }
  };
  
  return (
    <>
      <Container fluid style={{backgroundColor: 'rgba(186,205,214,1)'}} className={style.mainFrame}>
        <Row style={{margin:'auto',paddingTop:'40px',justifyContent:'center'}} className={style.clockFrame}>
           {renderer}
 
          <Countdown date={Date.now() + 100000} renderer={renderer} />
        </Row>
      </Container>
    </>
  )
  }
}
export default Home

在chrome和firefox浏览器中，该功能有效。 enter image description here

但在野生动物园返回NaN。 enter image description here

有人可以帮助我吗？