Rangeselector buttons flashing

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;

Start by reproducing issue #329 with the provided MonthlyStats component and react-plotly.js 2.6.0, focusing on the xaxis rangeselector buttons and their hover behavior. Compare the behavior with the underlying Plotly library to determine whether the defect belongs in this React wrapper or upstream. Done means identifying the responsible project and documenting a minimal reproduction or confirmed fix location.