Rangeselector buttons flashing

Bắt đầu bằng cách tái hiện issue #329 với component MonthlyStats được cung cấp và react-plotly.js 2.6.0, tập trung vào các nút rangeselector của xaxis và hành vi hover của chúng. So sánh hành vi này với thư viện Plotly bên dưới để xác định liệu lỗi nằm trong React wrapper này hay ở upstream. Được xem là hoàn tất khi đã xác định project chịu trách nhiệm và ghi lại một bản tái hiện tối thiểu hoặc vị trí đã xác nhận của bản sửa lỗi.

I have a simple react plotly chart. I've been playing around with styles and such, but no matter what I do all but the left most rangeselector buttons continuously flash on hover. Including a video below.

I'm using react-plotly.js 2.6.0 and will include my component code in it's entirety below.

Is this an issue I should direct to the main plotly library?

https://github.com/plotly/react-plotly.js/assets/7331495/73eb4341-ed2f-4cf8-b2d5-c4ba9ab60e0c

import { useEffect, useState } from "react";

import Loading from "./Loading";
import Plot from 'react-plotly.js';
import { PropTypes } from "prop-types";
import React from "react";
import { formatMonthData } from "../utils/formatMonthData";

const MonthlyStats = ({userId}) => {
    const [loading, setLoading] = useState(false);
    const [months, setMonths] = useState([])
    const [runMiles, setRuns] = useState([])
    const [walkMiles, setWalks] = useState([])

    useEffect(() => {
        const retrieveData = async () => {
            setLoading(true);
            const response = await fetch(`https://us-central1-stroller-stats.cloudfunctions.net/app/monthly-activities/${userId}`)
            const data = await response.json();
            const [months, runDistances, walkDistances] = formatMonthData(data)
            setMonths(months)
            setRuns(runDistances)
            setWalks(walkDistances)
            setLoading(false);
        }
        retrieveData()
    }, [userId])

    const data = [
        {
        x: months,
        y: runMiles,
        type: 'scatter',
        name: "Run miles",
        mode: 'lines+markers',
        marker: {color: '#03045e'},
        line: {color: "#03045e", width: 3}
        },
        {
            x: months,
            y: walkMiles,
            type: 'scatter',
            name: "Walk miles",
            mode: 'lines+markers',
            marker: {color: "#00f5d4"},
            line: {color: "#00f5d4", width: 3}
        },
    ]

    const layout = { 
        font: {family: "Inter", color: "black"}, 
        font_color: "black", 
        dragmode: false, 
        xaxis: {
            rangeselector: {
                buttons: [{
                    step: 'month',
                    stepmode: 'backward',
                    count: 6,
                    label: '6m'
                },{
                    step: 'year',
                    stepmode: 'todate',
                    count: 1,
                    label: 'YTD'
                }, {step: 'all'}]
            },
            type: "date", 'tickformat': '%b', tickmode: "array", tickvals: months}, 
        yaxis: {visible: true, hoverformat: ".2f"}, 
        hovermode: "x", 
        tickformat: ".0f",
        legend: {
            orientation: "h"
        }, 
        margin: { r: 0, l: 15, t: 0}
    }

    return (
        <>
            <h1>Monthly stroller miles</h1>
            {loading ? <Loading /> :
            <Plot  
                data={data}
                layout={layout}
                useResizeHandler={true}
                style={{width: "100%"}}
                config={{displayModeBar: false}}
            />}
        </>
    );
}

MonthlyStats.propTypes = {
    userId: PropTypes.string.isRequired,
}

export default MonthlyStats;