Timing field is ignored in react-move

I have followed the simplest example in React-Move but cannot get the timing to work. In a simple example, I display an svg rect and enlarge its width with every button click. There should be a smooth transition but the rect width changes instantly with each button click.

My index.js file is as follows:

import React from 'react';
import ReactDOM from 'react-dom/client';
import {Animate} from 'react-move'
import {  easeExpOut } from 'd3-ease'
import {  useState} from "react"

import App from './App';


function SVGPanel({ width, height, fill }) {
    const [rectsize,setRectSize]=useState(100);

  var handleClick = function() {
    setRectSize(rectsize*2);
  }
    return (
        <div  >
            <button onClick={handleClick}>Enlarge</button>
            <br/>
            <svg className='xmark'
                width={width} height={height} version="1.1" 
                xmlns="http://www.w3.org/2000/svg" 
                xlink="http://www.w3.org/1999/xlink"

                >
                <Animate
                        start={() => ({
                            x: rectsize,
                        })}

                        update={() => ({
                            x: [rectsize],
                            timing: { duration: 3000, ease: easeExpOut},
                        })}
                        >
                        {(state) => {
                            const { x } = state;
                            //console.log(x);
                            return (
                            <rect x={0} y={0} width={x} height={200} stroke="red" fill="pink">
                            </rect>
                            )
                        }}

                    </Animate>

            </svg>
        </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
    <SVGPanel width={800} height={400}/>
  </React.StrictMode>
);

My package.json is

{
  "name": "transitiontest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "d3-ease": "^3.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-move": "^6.5.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Any help would be appreciated. Thank you.

I have created a codepen around this example at codepen. However the timing works just fine over there. I tried rerunning the above code replacing the import statements to match the codepen example as follows:

import React from 'react';
import ReactDOM from 'react-dom/client';
import * as reactMove from "https://cdn.skypack.dev/react-move@6.5.0";
import * as d3Ease from "https://cdn.skypack.dev/d3-ease@3.0.1";
import App from './App';
const { useState } = React;
const { Animate } = reactMove;
const {easeExpOut}=d3Ease;

The code runs fine with these changes but still the timing is ignored.