react-chartjs-2 re-rendering line chart on mouseover of another component

Question

I have a basic Line chart:

import {Line} from 'react-chartjs-2';

// .. options and data

<Line options={options} data={dataState}/>

On the same page I have a map I am using from react-simple-maps and I am using a mouseEnter() to try and set a hook -- But every time I hover over one of my elements, the unrelated graph from charts-2 re-renders. How can I prevent this from happening?

My mouseEnter() event and the component it's tied to:

<ComposableMap projection="geoAlbersUsa">
    <Geographies geography={geoUrl}>
        {({geographies}) => (
            <>
                {geographies.map(geo => {
                    const state = allStates.find(s => s.val === geo.id).id;
                    const val = allStates.find(s => s.val === geo.id).val;
                    const cur = data.find(s => s.id === state);
                    console.log(state)
                    return (
                        <Geography
                            key={geo.rsmKey}
                            stroke="#FFF"
                            geography={geo}
                            style={{
                                default: {
                                    fill: cur ? colorScale(cur.val) : "#EEE",
                                    stroke: "#607D8B",
                                    strokeWidth: 0.75,
                                    outline: "none",
                                },
                                hover: {
                                    fill: "#CFD8DC",
                                    stroke: "#607D8B",
                                    strokeWidth: 1,
                                    outline: "none",
                                },
                                pressed: {
                                    fill: "#28538a",
                                    stroke: "#607D8B",
                                    strokeWidth: 1,
                                    outline: "none",
                                },
                            }}
                            onMouseEnter={(event) => { setMetric(val) }}
                        />
                    )
                })}
            </>
        )}
    </Geographies>
</ComposableMap>

setMetric is just a hook that is initially set to 0.