Recharts Bargraph Tooltip не становится видимым при наведении

Question

Итак, я просто установил гистограмму Recharts в компоненте функции, и график хорошо выглядит, но я не могу понять, почему подсказка не выходит из видимости: скрыта для видимости: видима при наведении на любую из полос,Это не было проблемой, когда я использовал компонент Linegraph.

Используемые данные взяты из состояния, но я попытался заменить их фиктивными, как в приведенном мной примере. Я попытался установить компонент всплывающей подсказки видимым с синтетическими событиями. Ничто не работает для меня.

Вот мой код:

import React, { Component, useState, useEffect } from "react";
import Select from "react-select";
import ClipLoader from "react-spinners/ClipLoader";
import {
    BarChart,
    Bar,
    XAxis,
    YAxis,
    CartesianGrid,
    Tooltip
} from "recharts";

function AgeChart() {
    const [userInfo, setInfo] = useState({
        dateofbirth: "",
        gender: "",
        age: ""
    });
    const [loading, setLoading] = useState(false);
    const [popInfo, setpopInfo] = useState([
        {
            country: "",
            pop: null,
            fpop: null
        }
    ]);

    function getData(opts) {
        setLoading(true);

        return axios
            .get("/api/user")
            .then(response => {
                const proxy_url = "https://cors-anywhere.herokuapp.com/";
                const dateofBirth = response.data.dateofbirth.slice(6);
                const currentDate = new Date();
                const age = currentDate.getFullYear() - dateofBirth;
                const url =
                    "http://54.72.28.201:80/1.0/population/" +
                    dateofBirth +
                    "/" +
                    "aged" +
                    "/" +
                    age +
                    "/";

                if (!opts) {
                    const userData = {
                        dateofbirth: dateofBirth,
                        gender: response.data.gender,
                        age: age
                    };
                    setInfo(userData);
                }
                if (opts && opts.gender) {
                    if (opts.gender === "females") {
                        const userData = {
                            dateofbirth: dateofBirth,
                            gender: "female",
                            age: age
                        };
                        setInfo(userData);
                    }
                    if (opts.gender === "males") {
                        const userData = {
                            dateofbirth: dateofBirth,
                            gender: "male",
                            age: age
                        };
                        setInfo(userData);
                    }
                }

                return axios.get(proxy_url + url);
            })
            .then(response => {
                const dataFiltered = response.data.filter(
                    x => x.males > 500000 && x.females > 500000
                );

                if (!opts) {
                    const finalObj = dataFiltered.map(x => ({
                        country: x.country,
                        pop: x.males,
                        fpop: x.females
                    }));
                    setpopInfo(finalObj);
                }
                if (opts && opts.gender) {
                    if (opts.gender === "females") {
                        const finalObj = dataFiltered.map(x => ({
                            country: x.country,
                            pop: x.females,
                            fpop: x.males
                        }));
                        setpopInfo(finalObj);
                    } else if (opts.gender === "males") {
                        const finalObj = dataFiltered.map(x => ({
                            country: x.country,
                            pop: x.males,
                            fpop: x.females
                        }));
                        setpopInfo(finalObj);
                    }
                }

                // Done loading data

                setLoading(false);
            });
    }

    useEffect(() => {
        getData();
    }, []);

    const options = [
        { value: "males", label: "Males" },
        { value: "females", label: "Females" }
    ];

    function graphRender(value, type) {
        let opts = {
            gender: null,
            country: null
        };

        if (type === "gender") {
            opts.gender = value.value;
        }

        if (type === "country") {
            opts.country = value.value;
        }

        // Ajax call
        getData(opts);
    }

    const dummy = [
        {country: "AFRICA", pop: 3473105, fpop: 3504543},
        {country: "ASIA", pop: 22813131, fpop: 21576678},
        {country: "Brazil", pop: 1047865, fpop: 1062049},
        {country: "Central America", pop: 679885, fpop: 700271}
    ]

    return (
        <div className="selectgraph-container">
            <div className="select-container">
                <Select
                    options={options}
                    onChange={(value, action) => {
                        graphRender(value, "gender");
                    }}
                />
            </div>
            <div className="graph-container">
                {loading ? (
                    <div>
                        {" "}
                        <ClipLoader sizeUnit={"px"} size={150} color={"#fff"} />
                    </div>
                ) : (
                    <div className="all-wrapper">
                        <div>
                            <p>
                                Gender: {userInfo.gender} Year Born:{" "}
                                {userInfo.age}
                            </p>
                        </div>
                        <BarChart 
                            width={1100}
                            height={300}
                            data={dummy}
                            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
                        >

                            <CartesianGrid strokeDasharray="1 1" />
                            <XAxis dataKey="country" stroke="#fff" />
                            <YAxis stroke="#fff" />
                            <Tooltip />


                            <Bar dataKey="fpop" stackId="a" fill="#8884d8" />
                            <Bar dataKey="pop" stackId="a" fill="#82ca9d" />
                        </BarChart>
                    </div>
                )}
            </div>
        </div>
    );
}

export default AgeChart;

Не получаю никаких сообщений об ошибках.