scrollZoom Error with react-plotly.js

plotly.js
1

I have a custom component that is being used in a Streamlit app. The custom component displays a Plotly Choropleth map using the Plot component from react-plotly.js. On initial render, this error is displayed over the map:

Screenshot 2025-02-24 at 12.27.20 PM
Screenshot 2025-02-24 at 12.27.20 PM1756×497 66.7 KB

If I close out of the error, the map displays perfectly. The error appears on Chrome and Safari. Here is the code for the component:

import {
  Streamlit,
  withStreamlitConnection,
  ComponentProps,
} from "streamlit-component-lib"
import React, {
  useEffect,
  useMemo,
  useState,
} from "react"
import { FC } from "react"
import Plot from "react-plotly.js"
import { Heading } from "@chakra-ui/react"

/**
 * This is a React-based component template. The passed props are coming from the
 * Streamlit library. Your custom args can be accessed via the `args` props.
 */
const PlotlyMap: FC<ComponentProps> = ({ args, disabled, theme }) => {
  const { plot } = args

  const [isFocused, setIsFocused] = useState(false)

  const plotly = useMemo(() => {
    const parsed = JSON.parse(plot);
    return {
      data: parsed.data || [], // Ensure data is at least an empty array
      layout: {
        ...(parsed.layout || {}),
        autosize: true,
        margin: { t: 30, r: 0, b: 0, l: 0}
      },
    };
  }, [plot]);

  const style: React.CSSProperties = useMemo(() => {
    if (!theme) return {}

    // Use the theme object to style our button border. Alternatively, the
    // theme style is defined in CSS vars.
    const borderStyling = `1px solid ${isFocused ? theme.primaryColor : "gray"}`
    return { border: borderStyling, outline: borderStyling }
  }, [theme, isFocused])

  // setFrameHeight should be called on first render and evertime the size might change (e.g. due to a DOM update).
  // Adding the style and theme here since they might effect the visual size of the component.
  useEffect(() => {
    Streamlit.setFrameHeight()
  }, [style, theme])

  return (
    <>
      <Heading>Plotly Map</Heading>
      <Plot
        key={JSON.stringify(plotly)}
        data={plotly.data}
        layout={plotly.layout}
        useResizeHandler={true}
        style={{ width: "100%", height: "100%" }}
        config={{scrollZoom: false, responsive: true}}
      />
    </>
  )
}

// "withStreamlitConnection" is a wrapper function. It bootstraps the
// connection between your component and the Streamlit app, and handles
// passing arguments from Python -> Component.
//
// You don't need to edit withStreamlitConnection (but you're welcome to!).
export default withStreamlitConnection(PlotlyMap)

Any ideas why the error is occurring? I’m passing in the scrollZoom as part of the configs prop for the Plot component and it does appear to be set correctly as mouse scrolling does not cause the plot to zoom in or out.