Rechart line chart positioning itself on top of my drawer

Question

I'm creating a dashboard using tailwindcss and next.js + Recharts. I've followed the recharts documentation for creating my line chart.

The chart by itself is working right, and the drawer is also working right. The drawer has a z-index of 99 to ensure it is placed on top of all the elements but the chart is still showing on top

Chart component

import React from "react";
import {
  BarChart,
  Bar,
  Cell,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";
const WeeklyIncome = ({
  data,
}: {
  data: {
    name: string;
    income: number;
    tax: number;
  }[];
}) => {
  console.log(data);
  return (
    <ResponsiveContainer
      className={"relative z-0 z0"}
      style={{
        position: "relative",
        zIndex: -1,
      }}
    >
      <BarChart
        width={500}
        height={300}
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
        barSize={20}
        className="z-0"
      >
        <XAxis dataKey="name" scale="point" padding={{ left: 10, right: 10 }} />
        <Tooltip />
        <Legend />
        <Bar dataKey="income" stackId={"a"} fill="#82ca9d" className="z-0" />
        <Bar dataKey="tax" stackId={"a"} fill="red" className="z-0" />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default WeeklyIncome;

Drawer Component

"use client";
import React from "react";
import useClickOutside from "@/hooks/useClickOutside";

import { motion, AnimatePresence } from "framer-motion";
const Drawer = ({
  isOpen,
  onClose,
  children,
}: {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}) => {
  const ref = useClickOutside(React.useRef(null), onClose);
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          className={`fixed inset-0 bg-black bg-opacity-50 z-[99]`}
          animate={{
            opacity: 1,
          }}
          initial={{
            opacity: 0,
          }}
          exit={{
            opacity: 0,
          }}
        >
          <motion.div
            className={`fixed left-0 top-0 w-80 h-full bg-white z-[99]`}
            animate={{
              x: 0,
            }}
            initial={{
              x: -300,
            }}
            exit={{
              x: -300,
            }}
            transition={{
              duration: 0.3,
              ease: "easeInOut",
            }}
            ref={ref}
          >
            <div className="flex justify-between items-center px-5 py-3">
              <h2 className="font-bold">EmprenAPP</h2>

              <button className="text-2xl" onClick={onClose}>
                &times;
              </button>
            </div>
            {children}
          </motion.div>
        </motion.div>
      )}
    </AnimatePresence>
  );
};

export default Drawer;

As you see i've tried adding z-index to all the elements of the chart but none seems to be working This is what i'm getting

And i'm expecting it to show beneath the drawer as you could imagine