With react , I am trying to add a section where it shows facts for 5 second intervals. No error shown, but the facts aren't appearing on the page

Client side

On my react application, i am trying to add a section where it shows facts randomly for 5 second intervals. No error shown, but the facts aren't appearing on the page when I run my code.

import React from "react";
import "./leftbar.css"


class FactSlides extends React.Component {
  timerID;

  constructor(props) {
    super(props);
    this.state = {
      factArr: ["a.", "b", "c", "d", "e"],
      abcFacts: "",
    };
  }

  componentDidMount() {
    this.timerID = setInterval(() => {
      this.setState({
        abcFacts:
          this.state.factArr[
            Math.floor(Math.random() * this.state.factArr.length)
          ],
      });
    }, 5000);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }
}

How is how I exported it in the leftbar component

export default function Leftbar(props) {
  return (
      <div className="leftbar">
        <div className="leftbarWrapper">
          <div className="leftBarTitle">
            Did you know?
          </div>
          <div className="space">
            &nbsp;
          </div>
          <div className="fact">
            <h2>{props.abcFacts}</h2>
          </div>

css file

.fact{
    color: #3D1959;
    font-weight: lighter;
    justify-content: space-between;
    align-items: center;
}