当我尝试显示来自 firebase 实时数据库的数据并显示圆形进度条时，组件未显示

Question

我创建了一个 firebase 实时数据库，其中包含各种任务的进度百分比。我想创建一个圆形进度条来显示百分比变化。我首先尝试从实时数据库中获取数据，然后创建一个静态进度条。

我的代码是这样的

import firebase from "../firebase";
import {
  CircularProgressbar,
  buildStyles
} from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
import Example from './Example'

class ProgressBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      processes: [],
    };
    console.log(this.state)
}

  componentDidMount() {
    console.log("componentDidMount is running")
    const processRef = firebase.database().ref("process");
    processRef.on("value", (snapshot) => {
      let processes = snapshot.val();
      let newState = [];
      for (let process in processes) {
        newState.push({
          id: process,
          number: processes[process].number,
          percentage: processes[process].percentage,
        });
        console.log(process)
      }
      console.log(newState);
      this.setState({
        processes: newState,
      });
    });
  }
  render() {
    return (this.state.processes.map((process) => {
      return (
        <Example label={process.number}>
          <CircularProgressbar
            value={process.percentage}
            text={`${process.percentage}%`}
            styles={buildStyles({
              textColor: "#00042A",
              pathColor: "#00042A",
            })}
          />
        </Example>
      );
    }));
  }
}

export default ProgressBar;
**Error is** 
**findDOMNode is deprecated in StrictMode. 
findDOMNode was passed an instance of Transition which is inside StrictMode. 
Instead, add a ref directly to the element you want to reference.**

I don't understand how to resolve this.

My React App is running but the ProgressBar component is not displaying, not even an empty div.