Calendar bg is tranparent and doesn't respond to style changes

[Luckynotrich]

Input works great, but only frame and text of calendar are visible. I tried applying style directly using className and overrideClasses. Nothing worked
Thanks for your time

React Component

import { useContext } from "react";
import Datepicker from "react-tailwindcss-datepicker";
import EventContext from "../../context/event-context";
const DatePicker = () => {
  const { startDate, setStartDate } = useContext(EventContext);
  return (

     //<div> added because a single <Datepicker /> element does not a complete react component make
     // and styling on <Datepicker /> itself failed. Only the position and width styling worked in the <div>

      <div className={"w-80 ml-[760px] bg-tan-light bg-opacity-70 z-20"}>
        <Datepicker
          primaryColor="fuchsia"
          displayFormat="MM/DD/YYYY"
          value={startDate}
          onChange={(newValue) => setStartDate(newValue)}
          showShortcuts={true}
        />
       
      </div>
    
  );
}
export default DatePicker;

Here is the package.json

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --host",
    "build": "bash build.sh",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tanstack/react-query": "^5.59.16",
    "axios": "^1.7.7",
    "dayjs": "^1.11.13",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.56.1",
    "react-router-dom": "^6.26.2",
    "react-tailwindcss-datepicker": "^1.7.3"
  },
  "devDependencies": {
    "@eslint/js": "^9.11.1",
    "@tailwindcss/typography": "^0.5.15",
    "@types/react": "^18.3.11",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.2",
    "autoprefixer": "^10.4.20",
    "eslint": "^9.11.1",
    "eslint-plugin-react": "^7.37.1",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.12",
    "globals": "^15.10.0",
    "postcss": "^8.4.47",
    "tailwindcss": "^3.4.13",
    "vite": "^6.3.2"
  }
}

Tailwind.config.js minus Theme screens for brevity

content: [
    './index.html',
    './public/**/*.html',
"./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/react-tailwindcss-datepicker/dist/index.esm.js"
  ],
theme: {
    colors: {
      'green': '#02542D',
      'green-light': '#8CCE70',
      'tan-light': '#fefae0',
      'papaya-whip':'#faedcd',
      'border-color':'#383838',
      'dark-gray':'gray-800',
      'dark-amber':'amber-600',
      'dark-yellow': 'yellow-700'
    },
    fontFamily:{
      sans:['Lato','sans-serif'],
      serif:['Pacifico','serif']
    },
    extend: {
      backgroundImage:{
        'hero-pattern':"url(/img-assets/GreenCoastHero_1024_tanfade_07.png)",///passets
      },
    },
  },
  plugins: [],
}