animation time is longer when max-height is bigger

Question

I have dynamic data thats coming form the API and I initially hide it and after we click it shows up with a transition, but the issue is that the more data we have meaning the bigger the max-height will be the animation is faster, and i want to be the same for all the elements regardless of max-height.

  useEffect(() => {
    if (isClicked) {
      setMaxHeight(contentRef?.current?.scrollHeight);
    }
  }, [isClicked, contentRef]);

this is the useEffect code

         <Content
          ref={contentRef}
          maxHeight={maxHeight}
          isClicked={isClicked}
        >
          <div>{children}</div>
        </Content>

The elements code

export const Content = styled.div`
  overflow: hidden;
  max-height: ${({ isToggled, maxHeight }) => (isToggled ? maxHeight : 0)}px;
  transition: max-height 0.7s ease;
`;

And the styled component.

Would greatly appreciate some help on how to make it the same transition regardless of max height, as of now i have no idea why it behaves in such way