CSS transaction not working with expand the show more

[nipunravisara]

I'm using Next.js app which has a card component that has read more link. when the user clicks on read more link the card should expand, now it's working properly but I need to add smooth expand to the card when press the read more link with CSS Transition rule but the CSS transition is not working. I tried with the anchorClass but it's not working. This is my component.

  return (
    <CardOuter>
      <CardIcon>
        <img className="CardIcons" alt="cardIcon" src={Icon} />
      </CardIcon>
      <CardContent>
        <h3>{Title}</h3>
        <ShowMore
          lines={5}
          more={<Link className="link-right" Content="Read More" />}
          less={<Link className="link-right-sl" Content="Show less" />}
          anchorClass="showMore"
        >
          {Description}
        </ShowMore>
      </CardContent>
    </CardOuter>
  );
};