How can I auto resize height with react spring

Question

I am trying to create animation for auto height with react spring, I already achieved the animation but if I go to another page and go back to the page that I have auto height animation it's not working until I refresh the page. How can I fix this problem?

Here is my following code:

      const defaultHeight = "100px";
      const [contentHeight, setContentHeight] = useState(defaultHeight); 
      const [ref, { height }] = useMeasure(); 
      const expand = useSpring({
        config: { ...config.default, duration: 250 },
        height: `${contentHeight}px` || defaultHeight,
      });

  useEffect(() => {
    setContentHeight(height);
    window.addEventListener("resize", setContentHeight(height));
    return window.removeEventListener("resize", setContentHeight(height));
  }, [height]);

return (
    <div className="team-management">
      <div className="team-management-tabs-header">
        <div className="team-management-tab-items">
          {tabs.map((tab, index) => (
            <div
              id={editable === true ? "" : `${tab}`}
              className={
                activeTab === index
                  ? "team-management-tab-item selected"
                  : "team-management-tab-item"
              }
              key={tab}
              role="button"
              tabIndex={tab}
              onKeyPress={() => {
                return;
              }}
              onClick={() => {
                if (editable === true) {
                  setActiveTab(index);
                } else if (index !== 5 && index !== 6) {
                  setActiveTab(index);
                }
              }}
            >
              {teamData.type === "organization" ? (
                <span className="tab-item-text">{tab}</span>
              ) : (
                <>
                  {tab !== "Sub-Team" && (
                    <span className="tab-item-text">{tab}</span>
                  )}
                </>
              )}
              <span className="tab-item-indicator" />
            </div>
          ))}
        </div>
      </div>
      <animated.div style={expand}>
        <div className="team-management-tab-panes" ref={ref}>
          {tabs[activeTab] === "Mission" && (
            <Mission
              editable={editable}
              teamId={teamId}
              teamData={teamData}
              fetchTeamData={fetchTeamData}
              notify={notify}
            />
          )}
          {tabs[activeTab] === "Managers" && <Managers members={members} />}
          {tabs[activeTab] === "Members" && (
            <Members
              members={members}
              teamId={teamId}
              tab={tabs[activeTab]}
              userPublicId={userPublicId}
              fetchTeamData={fetchTeamData}
              notify={notify}
            />
          )}

          {tabs[activeTab] === "Invitees" && (
            <Invitees
              teamData={teamData}
              teamId={teamId}
              privateTeamId={teamData.id}
              fetchTeamData={fetchTeamData}
              tab={tabs[activeTab]}
            />
          )}

          {tabs[activeTab] === "Sub-Team" && (
            <SubTeam
              teamId={teamId}
              teamData={teamData}
              members={members}
              fetchTeamData={fetchTeamData}
            />
          )}
        </div>
      </animated.div>
    </div>
  );

Thank you for helping me out