fix: Fix userEvent/convenience Example Code

Author: ssi02014

docs/user-event/api-convenience.mdx

@@ -21,7 +21,7 @@ pointer([{target: element}, {keys: '[MouseLeft]', target: element}])
 ```js
 test('click', async () => {
   const user = userEvent.setup()
-  render(<input type="checkbox" onChange={onChange} />)
+  render(<input type="checkbox" />)
 
   const checkbox = screen.getByRole('checkbox')
 
@@ -46,7 +46,7 @@ pointer([{target: element}, {keys: '[MouseLeft][MouseLeft]', target: element}])
 ```js
 test('double click', async () => {
   const user = userEvent.setup()
-  render(<input type="checkbox" onChange={onChange} />)
+  render(<input type="checkbox" />)
 
   const checkbox = screen.getByRole('checkbox')
 
@@ -72,7 +72,7 @@ pointer([
 ```js
 test('triple click', async () => {
   const user = userEvent.setup()
-  render(<input type="checkbox" onChange={onChange} />)
+  render(<input type="checkbox" />)
 
   const checkbox = screen.getByRole('checkbox')
 
@@ -97,31 +97,31 @@ pointer({target: element})
 ```js
 const TestComponent = () => {
   const [isHover, setIsHover] = useState(false)
-  
+
   return (
-    <div
-      style={{ backgroundColor: isHover ? 'red' : 'green' }}
+    <p
+      role="paragraph"
       onMouseEnter={() => setIsHover(true)}
       onMouseLeave={() => setIsHover(false)}
     >
-      Hover
-    </div>
+      {isHover ? 'Hover' : 'UnHover'}
+    </p>
   )
 }
 
 test('hover/unhover', async () => {
   const user = userEvent.setup()
   render(<TestComponent />)
 
-  const hoverBox = screen.getByText('Hover')
+  const paragraph = screen.getByRole('paragraph')
 
-  await userEvent.hover(hoverBox)
+  await user.hover(paragraph)
 
-  expect(hoverBox).toHaveStyle({ backgroundColor: 'red' })
+  expect(paragraph).toHaveTextContent('Hover')
 
-  await userEvent.unhover(hoverBox)
+  await user.unhover(paragraph)
 
-  expect(hoverBox).toHaveStyle({ backgroundColor: 'green' })
+  expect(paragraph).toHaveTextContent('UnHover')
 })
 ```