docs: fix JS/TS code block (#60854)

And also making it more clear it doesn't have to be two separate files.

errors/missing-suspense-with-csr-bailout.mdx

@@ -10,28 +10,25 @@ Reading search parameters through `useSearchParams()` without a Suspense boundar
 
 Ensure that calls to `useSearchParams()` are wrapped in a Suspense boundary.
 
-```tsx title="app/page.tsx"
+```jsx title="app/search.js"
-import { SearchBar } from './search'
-import { Suspense } from 'react'
-
-export default function Page() {
-  return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <SearchBar />
-    </Suspense>
-  )
-}
-```
-
-```jsx title="app/search.tsx"
 'use client'
 
 import { useSearchParams } from 'next/navigation'
+import { Suspense } from 'react'
 
-export function Search() {
+function Search() {
   const searchParams = useSearchParams()
 
-  return '...'
+  return <input placeholder="Search..." />
+}
+
+export function Searchbar() {
+  return (
+    // You could have a loading skeleton as the `fallback` too
+    <Suspense>
+      <Search />
+    </Suspense>
+  )
 }
 ```