My Bar Charts are not animating when i switch between pages in Next.js

[cachedAli]

Im using Shadcn Horizontal Bar Charts as a reusable component but whenever i switch between dashboard pages it doesnt animate,
it only animates on first mount.

This is my code:
`"use client";

import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
ChartConfig,
ChartContainer,
ChartTooltip,
} from "@/components/ui/chart";
import { CustomTooltip } from "../CustomToolTip";

export const description = "A horizontal bar chart";

interface BarChartProps<T extends Record<string, unknown>> {
data: T[];
config: ChartConfig;
color: string;
title: string;
margin?: number;
labelKey: keyof T;
valueKey: keyof T & string;
}

export function BarChartHorizontal<T extends Record<string, unknown>>({
data,
config,
color,
title,
labelKey,
margin=40,
valueKey,
}: BarChartProps) {
return (


{title}



<BarChart
accessibilityLayer
data={data}
layout="vertical"
margin={{
left: margin,
}}
>

<XAxis type="number" dataKey={valueKey as string} />
<YAxis
dataKey={labelKey as string}
type="category"
tickLine={true}
tickMargin={0}
axisLine={true}
tick={({ x, y, payload }) => {
const words = payload.value.split(" ");
const lines: string[] = [];
for (let i = 0; i < words.length; i += 2) {
lines.push(words.slice(i, i + 2).join(" "));
}

            return (
              <text
                x={x - 10}
                y={y}
                textAnchor="end"
                style={{
                  fill: "#ffffff",
                  fontSize: 12,
                  fontWeight: 500,
                  dominantBaseline: "central",
                }}
              >
                {lines.map((line, index) => (
                  <tspan
                    className="text-white!"
                    key={index}
                    x={x - 10}
                    dy={index === 0 ? 0 : 14}
                  >
                    {line}
                  </tspan>
                ))}
              </text>
            );
          }}
          tickFormatter={(value) => value}
        />
        <ChartTooltip cursor={false} content={<CustomTooltip />} />
        <Bar
          dataKey={valueKey as string}
          layout="vertical"
          fill={color}
          radius={4}
        ></Bar>
      </BarChart>
    </ChartContainer>
  </CardContent>
</Card>

);
}
`
i tried adding pathname as key or using useEffect with pathname as key too, But nothing seems to work.
But my pie charts does animate when i switch pages. So, idk what's the issue with this chart.

This is my Pie Chart component:

`"use client";

import * as React from "react";
import { Pie, PieChart, Label, Cell } from "recharts";
import { Card, CardContent } from "@/components/ui/card";
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart";

const chartData = [
{ name: "Filled", value: 96 },
{ name: "Remaining", value: 4 },
];

export function ChartPieDonut() {
return (


<ChartContainer
config={{}}
className="mx-auto aspect-square max-h-[250px]"
style={{ backgroundColor: "#000f1f" }}
>

<ChartTooltip
cursor={false}
content={}
/>



<Label
content={({ viewBox }) => {
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
return (


96%


);
}
}}
/>





);
}
`