My lottie animation is not working when my component is render

Question

My Lottie animation is not working when my component is render whenever i refresh my page the Lottie is working but when i switch one button to another button like (Flat Discount to Buy X Get Y) my Lottie animation is not working code-

import React from 'react';
import cx from 'classnames';
import { useSubscription } from '../../context/SubscriptionProvider';
import {
  BUY_X_GET_Y,
  FLAT_DISCOUNT,
  FREEBIE,
  PERCENTAGE_DISCOUNT,
} from './constants';
import ImageLoaders from '../../shared/ImageLoaders';

const NoCouponOnFilterScreen = ({ type = PERCENTAGE_DISCOUNT }) => {
  const { isOnTrial } = useSubscription();
  const handleCouponType = () => {
    if (type === PERCENTAGE_DISCOUNT) return <span>Percentage discount</span>;
    if (type === FLAT_DISCOUNT) return <span>Flat discount</span>;
    if (type === BUY_X_GET_Y) return <span>Buy X Get Y</span>;
    if (type === FREEBIE) return <span>Freebie</span>;
  };
  return (
    <div
      className={cx('no-coupons-container d-flex-c-c', {
        'add-footer-height': isOnTrial,
      })}
    >
      <ImageLoaders json="no_coupon" />
      <p className="section-text-3">
        You don't have any {handleCouponType()} coupons.
      </p>
    </div>
  );
};

export default NoCouponOnFilterScreen;