React ticker package giving an error "Uncaught Error: Maximum update depth exceeded"

I am using the react-ticker package inside my code as follows:

import React from "react";
import "./VideoFooter.css"
import { Button, Avatar } from "@mui/material"
import MusicNoteIcon from '@mui/icons-material/MusicNote';
import Ticker from "react-ticker";

function VideoFooter({ channel, song, likes, shares, avatarSrc }) {
    console.log(song)
    return (
        <div className="videoFooter">
            <div className="videoFooter__text">
                <Avatar src={avatarSrc} />
                <h3>{channel} . <Button>Follow</Button></h3>
            </div>
            <div className="videoFooter__ticker">
                <MusicNoteIcon className="videoFooter__icon" />
                <Ticker>
                    {({ index }) => (
                        <>
                            <h1>{song}</h1>
                        </>
                    )}
                </Ticker>
            </div>
        </div>
    )
}

export default VideoFooter

Whenever I include the Ticker component I get the error as follows:

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:27084:1)
    at scheduleUpdateOnFiber (react-dom.development.js:25266:1)
    at Object.enqueueSetState (react-dom.development.js:13234:1)
    at Ticker.Component.setState (react.development.js:354:1)
    at Ticker._this.setRect (index.js:52:1)
    at TickerElement._this.setPosition (Element.js:111:1)
    at TickerElement._this.componentDidMount (Element.js:50:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23118:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24461:1)
    at commitLayoutEffects_begin (react-dom.development.js:24447:1)

This only happens if I include Ticker component.

This is my project hierarchy:

    import React, {useState, useRef} from "react"
import "./VideoCard.css"
import VideoHeader from "./VideoHeader"
import VideoFooter from "./VideoFooter"

function VideoCard({url, likes, shares, channel, avatarSrc, song}) {
    const [isVideoPlaying, setIsVideoPlaying] = useState(false)
    const videoRef = useRef(null)
    const onVideoPress = () => {
        if (isVideoPlaying) {
            videoRef.current.pause()
            setIsVideoPlaying(false)
        } else {
            videoRef.current.play()
            setIsVideoPlaying(true)
        }
    }

    return (
        <div className="videoCard">
            <VideoHeader />
            <video className="videoCard__player"
                ref={videoRef}
                onClick={onVideoPress}
                src={url}
                alt="IG Reel Video"
                loop
                autoPlay
            />
            <VideoFooter 
                channel={channel}
                likes={likes}
                shares={shares}
                avatarSrc={avatarSrc}
                song={song}
            />
        </div>
    )
}

export default VideoCard

It contains 3 parts, VideoHeader, <video /> tag and VideoFooter component. The error is appearing in the VideoFooter component.

Kindly comment if more information is needed.