Column is not re-rendered when width is changed from outside AFTER it was resized by drag-and-drop

[lowellbradigan]

Describe the bug

When you create a Grid with resizable columns, the column is not re-rendered when width has been changed in props, if you resized it by drag-and-drop before that

To Reproduce

Link to code example: https://codesandbox.io/s/nice-bhabha-y9yim4?file=/src/App.js:0-668

1. Open codesandbox
2. Resize Title column by hand (drag-and-drop)
3. Click [Set width to 100] button
4. The column Title will not change, but should

import "./styles.css";

import "react-data-grid/lib/styles.css";
import DataGrid from "react-data-grid";
import { useMemo, useState } from "react";

export default function App() {
  const [w, setW] = useState(200);

  const columns = useMemo(
    () => [
      { key: "id", name: "ID", resizable: true },
      { key: "title", name: "Title", width: w, resizable: true }
    ],
    [w]
  );

  const rows = useMemo(
    () => [
      { id: 0, title: "Example " + w },
      { id: 1, title: "Demo" }
    ],
    [w]
  );

  return (
    <>
      <DataGrid columns={columns} rows={rows} />
      <button onClick={() => setW(100)}>Set width to 100</button>
    </>
  );
}

Expected behavior

It should be possible to set Column width by changing the props in column definitions

Environment

• react-data-grid version: 7.0.0-beta.19
• react/react-dom version: 18.2.0