Custom animation does not disappear when using renderPlaceHolderLoading

Sendbird Chat UIKit React
1

[Problem]
// I am attempting to change the loading spinner on ChannelList to a custom animation using the prop renderPlaceHolderLoading. My custom animation successfully loads however it never disappears even after the channels load.

Note: Strangely if I remove queries from ChannelList the problem is resolved however then I am not able to fetch empty chats.

[UIKit Version]
Using React UIkit version 3.1.2

[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.

const [animationRef, setAnimationRef] = useState(null);

    useEffect(() => {
            lottie.loadAnimation({
                animationData: animation,
                autoplay: true,
                container: animationRef,
                loop: true,
                renderer: "svg",
            });
    }, [animationRef]);

<ChannelList
  className={styles.channelList}
  queries={{
     channelListQuery: {
        includeEmpty: true,
     },
 }}
 renderChannelPreview={({ channel }) =>
    renderChannelPreview(channel)
 }
 renderHeader={renderHeader}
 renderPlaceHolderLoading={() => (
   <MusterChannelListLoading
       <div ref={(ref) => setAnimationRef(ref)}></div>
    />
 )}
/>