When trying to use the CountdownCircleTimer from react-countdown-circle-timer, I get the following errors in my browser:

I only have the following code, absolutely nothing else, no other components in my React project:

import './App.css';
import { CountdownCircleTimer } from "react-countdown-circle-timer";


function App() {
  return (
    <div className="App">
      <Timer/>
      <CountdownCircleTimer
        isPlaying
        duration={10}
        colors={[
          ["#004777", 0.33],
          ["#F7B801", 0.33],
          ["#A30000", 0.33],
        ]}
      />
    </div>
  );
}

export default App;

Here is what my package.json looks like:

"dependencies": {
    "react": "^17.0.2",
    "react-countdown-circle-timer": "^2.5.4",
    "react-dom": "^17.0.2"
  }

Here is my index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

I am at a loss as to why this is happening. What can I do to fix it? This is a brand new React project and I wanted to test this component inside App.js before moving forward.

Thank you.