Not able to disable the hints, on hover I always see a text box no matter what I do

[trollord]

my component and my package json

import React, { useEffect, useState } from "react";
import DatamapsIndia from "react-datamaps-india";
import states from "../data/states";

interface IndiaMapProps {
  operatingStates: string[];
  className?: string;
}

const IndiaMap: React.FC<IndiaMapProps> = ({ operatingStates, className = "" }) => {
  const [regionData, setRegionData] = useState<Record<string, any>>({});

  useEffect(() => {
    const data: Record<string, any> = {};
    
    states.forEach((state) => {
      const isOperating = operatingStates.includes(state.state_name);
      data[state.state_name] = { 
        state_id: state.state_id,
        value: isOperating ? 1 : 0,
        fillKey: isOperating ? 'operating' : 'notOperating'
      };
    });
    
    setRegionData(data);
  }, [operatingStates]);

  return (
    <div className={`w-full flex justify-center items-center ${className}`}>
      <div className="w-full max-w-md mx-auto">
        <DatamapsIndia
          regionData={regionData}
          hoverComponent={() => null}
          mapLayout={{
            title: "",
            legendTitle: "",
            startColor: "#E5E7EB",
            endColor: "#663399",
            hoverTitle: "",
            noDataColor: "#F3F4F6",
            borderColor: "#D1D5DB",
            hoverBorderColor: "#663399",
            hoverColor: "#B6A3D3",
          }}
          fills={{
            operating: "#663399",
            notOperating: "#F3F4F6",
            defaultFill: "#F3F4F6"
          }}
        />
      </div>
    </div>
  );
};

export default IndiaMap;

{
  "name": "genechord-pharma",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "framer-motion": "^11.0.8",
    "lucide-react": "^0.344.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.22.3",
    "react-datamaps-india": "0.4.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.9.1",
    "@types/react": "^18.3.5",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.18",
    "eslint": "^9.9.1",
    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
    "eslint-plugin-react-refresh": "^0.4.11",
    "globals": "^15.9.0",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.5.3",
    "typescript-eslint": "^8.3.0",
    "vite": "^5.4.2"
  }
}

[shubhexists]

Hi @trollord , As far as I can see in your package.json you are using some other package named react-datamaps-india and not react maps? Is there something I am missing? To use React maps India, kindly install

"@react-map/india": "^1.0.21"

I verified that hints are working perfectly. Let me know if you still face issues!

[trollord]

@shubhexists How do I preselect the states and keep them fixed using "@react-map/india": "^1.0.21"

Can you share the sample code for the same I want to select Maharashtra Goa MadhyaPradesh and Gujrat just the way it is in the above picture please share the code for the same