docs: fix the user-event example (#1103)

Resolves: issue #912

docs/ecosystem-user-event.mdx

@@ -615,16 +615,21 @@ method.
 Usage example:
 
 ```jsx
-import React from 'react'
+import React, { useState } from 'react'
 import {render, screen} from '@testing-library/react'
 import userEvent, {specialChars} from '@testing-library/user-event'
 
+const InputElement = () => {
+  const [currentValue, setCurrentValue] = useState('This is a bad example');
+  return <div>
+    <label htmlFor='my-input'>Example:</label>
+    <input id='my-input' type='text' value={currentValue} onChange={(e) => setCurrentValue(e.target.value)} />
+  </div>;
+}
+
 test('delete characters within the selectedRange', () => {
   render(
-    <div>
-      <label htmlFor="my-input">Example:</label>
-      <input id="my-input" type="text" value="This is a bad example" />
-    </div>,
+    <InputElement/>,
   )
   const input = screen.getByLabelText(/example/i)
   input.setSelectionRange(10, 13)