React can't rewrite inline style when jsx change

Question

React can't rewrite inline style when element has its own inline style. I want to know how to rewrite element style when element has some inline style.

Here is a simple demo:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

setTimeout(() => {
  const elem = document.getElementById("button");
  elem.style.left = `100px`;
}, 2000);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [state, setState] = useState({
    position: "absolute",
    left: "342px",
    top: "141px",
  });
  setTimeout(() => {
    setState({
      position: "absolute",
      left: "342px",
      top: "142px",
    });
  }, 3000);
  return (
    <div className="App">
      <button
        id="button"
        nodepath="rootview.1.0"
        ide-iscontainer="false"
        type="primary"
        style={state}
      >
        button3
      </button>
    </div>
  );
}

button position cannot change after state change.

https://codesandbox.io/p/sandbox/crazy-proskuriakova-fgnv7g?file=%2Fsrc%2FApp.js

https://codesandbox.io/p/sandbox/crazy-proskuriakova-fgnv7g?file=%2Fsrc%2FApp.js

I want to know how to rewrite element style when element has some inline style in React.