Layout does not update when the chart gets a different set of data - revision and layout.datarevision don't work

I am trying to update a whole bar chart using Plotly React.
First I have a bar chart with bars on vertical, then after I click wherever on the chart I would like to rotate the chart 90 degrees and have the bars on horizontal with different data. So X axis becames Y and vice-versa.

I have tried using the revision prop of the <Plot /> component and the layout.dataverision property but it doesn't work.
When I click on the chart, it just empties.

I have

  const onUpdate = (event) => {
    console.log('update', event);
  };

which logs the appropriate data and layout in console before and after the click.

Basically the data updates but the layout does not and the issue comes from the x and y axis trying to display the same type data and not assessing what is the new data.

// here xaxis thinks it has to display strings
// and yaxis thinks it has to display numbers
// which is correct only for the first set of data
xaxis: {autorange: true, range: Array(2), type: "category"},
yaxis: {autorange: true, range: Array(2), type: "linear"}
// the second set of data reverses the x and y axes, so the new properties should be:
xaxis: {autorange: true, range: Array(2), type: "linear"},
yaxis: {autorange: true, range: Array(2), type: "category"}

How can I make Plotly asses the new data and update the layout accordingly ?

Thank you.

https://codesandbox.io/s/elegant-williams-jofx90?file=/src/BarChart.js

import { useEffect, useState } from "react";
import Plot from "react-plotly.js";

export default function BarChart() {
  const [chart, setChart] = useState({
    data: [],
    layout: {
      title: "Some BarChart",
      showlegend: true,
      legend: {
        x: 0,
        y: -0.4,
        orientation: "h"
      },
      autosize: true,
      barmode: "stack",
      datarevision: 0
    },
    config: { responive: true },
    revision: 0
  });

  useEffect(() => {
    const farm1 = {
      x: ["Ducks", "Cows", "Pigs", "Chickens"],
      y: [10, 12, 14, 16],
      name: "Farm 1",
      type: "bar",
      marker: { color: "#000" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>"
    };
    const farm2 = {
      x: ["Ducks", "Cows", "Pigs", "Chickens"],
      y: [8, 10, 12, 14],
      name: "Farm 2",
      type: "bar",
      marker: { color: "#FE7100" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>"
    };

    setChart((prevState) => ({
      data: [farm1, farm2],
      layout: { ...prevState.layout }
    }));
  }, [setChart]);

  const onUpdate = (event) => {
    console.log("update", event);
  };

  const onClick = (event) => {
    const farm1 = {
      x: [10, 12, 14, 16],
      y: ["Ducks", "Cows", "Pigs", "Chickens"],
      name: "Farm 1",
      type: "bar",
      marker: { color: "#000" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>",
      orientation: "h"
    };

    const farm2 = {
      x: [8, 10, 12, 14],
      y: ["Ducks", "Cows", "Pigs", "Chickens"],
      name: "Farm 2",
      type: "bar",
      marker: { color: "#FE7100" },
      hovertemplate: "%{x} - %{y:.0f} <extra></extra>",
      orientation: "h"
    };

    setChart((prevState) => ({
      data: [farm1, farm2],
      layout: {
        ...prevState.layout,
        datarevision: prevState.layout.datarevision + 1
      },
      revision: prevState.revision + 1
    }));

    console.log(event.points[0].x.replaceAll("<br>", " ").trim());
  };

  return (
    <Plot
      data={chart.data}
      layout={chart.layout}
      config={chart.config}
      revision={chart.revision}
      style={{ width: "100%", height: "100%" }}
      useResizeHandler
      onClick={onClick}
      onUpdate={onUpdate}
    />
  );
}

Commencez par reproduire le problème dans src/BarChart.js du CodeSandbox lié et examinez comment le composant Plot reçoit data, layout, revision et layout.datarevision avant et après le clic. Reproduisez l’inversion des axes et comparez le graphique rendu aux props journalisées ; le travail est terminé lorsque le remplacement de data met à jour les deux types d’axes et que le graphique n’est plus vide.