In my Nextjs component, I’ve implemented a bar chart in which I had to show two different labels in both side of the Y axis.

<BarChart accessibilityLayer data={formattedData}>
                <CartesianGrid vertical={false} />
                <XAxis
                  dataKey="dateAndName"
                  tickFormatter={(value) => value.split(" - ")[1].slice(0, 10)}
                  height={60}
                  angle={-45}
                  textAnchor="end"
                />{" "}
                {(productChartView === "both" ||
                  productChartView === "sales") && (
                  <YAxis
                    yAxisId="left"
                    stroke="#888888"
                    fontSize={12}
                    tickLine={false}
                    axisLine={false}
                    label={{
                      value: "Sales",
                      angle: -90,
                      position: "insideLeft",
                    }}
                  />
                )}
                {(productChartView === "both" ||
                  productChartView === "revenue") && (
                  <YAxis
                    yAxisId="right"
                    orientation="right"
                    stroke="#888888"
                    fontSize={12}
                    tickLine={false}
                    axisLine={false}
                    label={{
                      value: "Revenue ($)",
                      angle: 90,
                      position: "insideRight",
                    }}
                  />
                )}
                <ChartTooltip
                  cursor={false}
                  content={<ChartTooltipContent indicator="dashed" />}
                />
                {(productChartView === "both" ||
                  productChartView === "sales") && (
                  <Bar dataKey="sales" fill="var(--color-sales)" radius={4} />
                )}
                {(productChartView === "both" ||
                  productChartView === "revenue") && (
                  <Bar
                    dataKey="revenue"
                    fill="var(--color-revenue)"
                    radius={4}
                  />
                )}
              </BarChart>

But the problem is, I can only show a label in either side of Y axis rather than depicting two different labels in right and left side.

I tried specifying two different yAxisId but didn’t work out.