InputOtp: Setting Value does not clear display

[ozziej]

Describe the bug

If you modify the value by using setOtpValue for example somewhere in the code, it sets the value correctly, but the InputOtp display does not change.
Unable to supply forked stackblitz as the InputOtp component is not available.

Reproducer

No response

PrimeReact version

10.6.5

React version

18.x

Language

ALL

Build / Runtime

Vite

Browser(s)

Any / All

Steps to reproduce the behavior

import { useState } from 'react';
import { InputOtp } from 'primereact/inputotp';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import 'primereact/resources/themes/lara-light-indigo/theme.css'; //theme
import 'primereact/resources/primereact.min.css'; //core css
import 'primeicons/primeicons.css'; //icons
import 'primeflex/primeflex.css'; // flex


function App() {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState('');

  return (
    <>
      <div className="App">
        <InputOtp length="4" value={value} onChange={(e) => setValue(e.value)} />
        <Button label="Reset" onClick={() => setValue('')} />
        <InputText value={value} readOnly/>
      </div>
    </>
  );
}

export default App;

Expected behavior

In the above example, InputOtp should clear the display (or at least obey the set "value")
It works correctly with InputText