Tooltip didn't show all XAxis data in recharts

Question

I am using recharts library and I built line chart with two XAxis to compare between data for different time periods, but when hover to display Tooltip, it didn't show second XAxis data.

chart code

            <ResponsiveContainer aspect={1.5}>
              <LineChart margin={{ top: 0, right: 40, left: 20, bottom: 39 }}>
                <CartesianGrid strokeDasharray="1" vertical={false} />
                <XAxis
                  dataKey="date"
                  xAxisId={"first"}
                  orientation="bottom"
                  tick={CustomizedAxisTick}
                  interval={period?.value === "hour" ? 0 : "preserveEnd"}
                  allowDuplicatedCategory={false}
                />

                <XAxis
                  dataKey="date"
                  hide={period?.value === "hour" ? true : false}
                  xAxisId={"second"}
                  orientation="bottom"
                  tick={CustomizedAxisTick}
                  interval={period?.value === "hour" ? 0 : "preserveEnd"}
                  axisLine={false}
                  allowDuplicatedCategory={false}
                />
                <YAxis
                  className="text-[0.7rem]"
                  tickFormatter={(value) => value.toLocaleString()}
                />
                <Tooltip />
                <Legend
                  verticalAlign={"top"}
                  onClick={(event) =>
                    toggleBarVisibility(
                      hiddenOrdersTimeLineBars,
                      setHiddenOrdersTimeLineBars,
                      event?.dataKey
                    )
                  }
                />
                <Line
                  xAxisId={"first"}
                  data={revenu}
                  type="monotone"
                  dataKey="totalWithTax"
                  name={
                    compare
                      ? t("total_with_tax_first_period")
                      : t("total_with_tax")
                  }
                  stroke="#6496d2"
                  hide={hiddenOrdersTimeLineBars.includes("totalWithTax")}
                  strokeWidth={2}
                />
                <Line
                  xAxisId={"first"}
                  data={revenu}
                  type="monotone"
                  dataKey="totalWithoutTax"
                  name={
                    compare
                      ? t("total_without_tax_first_period")
                      : t("total_without_tax")
                  }
                  hide={hiddenOrdersTimeLineBars.includes("totalWithoutTax")}
                  stroke="#2F1F15"
                  strokeWidth={2}
                />
                {period?.value !== "hour" && (
                  <Line
                    xAxisId={"first"}
                    data={revenu}
                    type="monotone"
                    dataKey="Target Revenu"
                    name={t("target_revenu")}
                    stroke="#a592b5"
                    hide={hiddenOrdersTimeLineBars.includes("Target Revenu")}
                    strokeWidth={2}
                  />
                )}

                <Line
                  xAxisId={"second"}
                  data={revenu2}
                  type="monotone"
                  dataKey="totalWithTax"
                  name={t("total_with_tax_second_period")}
                  stroke="#1916d2"
                  hide={hiddenOrdersTimeLineBars.includes("totalWithTax")}
                  strokeWidth={2}
                />
                <Line
                  xAxisId={"second"}
                  data={revenu2}
                  type="monotone"
                  dataKey="totalWithoutTax"
                  name={t("total_without_tax_second_period")}
                  hide={hiddenOrdersTimeLineBars.includes("totalWithoutTax")}
                  stroke="#a592b5"
                  strokeWidth={2}
                />
                {period?.value !== "hour" && (
                  <Line
                    xAxisId={"second"}
                    data={revenu2}
                    type="monotone"
                    dataKey="Target Revenu"
                    name={t("target_revenu")}
                    stroke="#a592b5"
                    hide={hiddenOrdersTimeLineBars.includes("Target Revenu")}
                    strokeWidth={2}
                  />
                )}
              </LineChart>
            </ResponsiveContainer>

what I have now, i want to show both XAxis data

I tried to change tooltip format or use custom tooltip but the payload of tooltip didn't have the second XAxis data