类型错误：无法设置未定义的属性“FlipPage”

Question

所以我正在制作一个使用这个库的网站：https://github.com/darenju/react-flip-page

那个代码要求我使用这个：``` { this.flipPage = component; }}>````

但是当我使用它时我得到

<块引用>

TypeError: 无法设置未定义的属性“FlipPage”

问：我做错了什么？

代码：

import React, { useState } from "react";
import Container from "react-bootstrap/Container";
import { useHistory } from 'react-router-dom';
import FlipPage from 'react-flip-page';
import "../App.css";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import ProgressBar from "react-bootstrap/ProgressBar";
import Image from "react-bootstrap/Image";
import { Link } from "react-router-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Navigation, Footer, Home, Quiz, Tasks, Chap, Plus, Subchap } from "../components";
import axios from 'axios';

export default function App(){
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [user, setUser] = useState();
  const [c1, setC1] = useState([]);
  const [c2, setC2] = useState(true);
  
  axios.get('https://run.mocky.io/v3/d682f1d3-fe57-4c5f-ba74-688f355d4002').then(resp => {
    if(c2){
    c1.push(resp.data["progress"]["1"]);
    c1.push(resp.data["progress"]["2"]);
    console.log(c1);
    setC2(false);
    }
  });
return(
  <div className="p-3 header">
  <FlipPage ref={(component) => { this.flipPage = component; }} orientation="horizontal" width="400%" height="850" >  
  <article>
  <Router>
      <Switch>
        <Chap />
      </Switch>
  </Router>
  </article>
  <article>
  <Router>
      <Switch>
        <Tasks />
      </Switch>
  </Router>
  </article>
  <article>
    <h1>My excellent third article</h1>
    <p>My excellent third content</p>
  </article>
</FlipPage>
</div>
);

  /*const history = useHistory();
  setUser({});
  setUsername("");
  setPassword("");
  localStorage.clear();
  let path = `/`; 
  history.push(path);
  window.location.reload();*/
}