Error: Component ReactCardFlip requires 2 children to function. What is the problem?

Question

JavaScript

What could be the problem?

import React, { useState } from 'react'
import '../index.css'
import logo from '../logo.png'
import red from '../red.png'
import ReactCardFlip from 'react-card-flip'

const Main = () => {
  const [isFlipped, setIsFlipped] = useState(false)
  const handleClick = () => {
    setIsFlipped(!isFlipped)
  }
    return (
      <div>
        <section class="memory-game">
          <ReactCardFlip isFlipped={isFlipped} flipDirection='vertical'>
          <div class="memory-card" >
            <div><img class="front-face" onClick={handleClick} src={red} alt="React" /></div>
            <div><img class="back-face" onClick={handleClick} src={logo} alt="Memory Card" /></div>
          </div>
          </ReactCardFlip>
        </section>
      </div>
    )
  }


export default Main


и на всякий случай файл index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Main from './components/Main';


ReactDOM.render(

    <Main/>
  ,
  document.getElementById('root')
);

serviceWorker.unregister();