Custom animation does not disappear when using renderPlaceHolderLoading

// 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(() => {
                animationData: animation,
                autoplay: true,
                container: animationRef,
                loop: true,
                renderer: "svg",
    }, [animationRef]);

     channelListQuery: {
        includeEmpty: true,
 renderChannelPreview={({ channel }) =>
 renderPlaceHolderLoading={() => (
       <div ref={(ref) => setAnimationRef(ref)}></div>