fix: Fix userEvent/convenience Example Code

Author: ssi02014

docs/user-event/api-convenience.mdx

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