diff --git a/docs/react-testing-library/setup.mdx b/docs/react-testing-library/setup.mdx
index d9669bf97..138789de6 100644
--- a/docs/react-testing-library/setup.mdx
+++ b/docs/react-testing-library/setup.mdx
@@ -96,11 +96,10 @@ const AllTheProviders: FC = ({ children }) => {
 
 const customRender = (
   ui: ReactElement,
-  options?: Omit<RenderOptions, 'queries'>
+  options?: Omit<RenderOptions, 'wrapper'>
 ) => render(ui, { wrapper: AllTheProviders, ...options })
 
 export * from '@testing-library/react'
-
 export { customRender as render }
 ```
 
@@ -194,7 +193,12 @@ passing a [`queries`](api.mdx#render-options) option.
 If you want to add custom queries globally, you can do this by defining a custom
 render method:
 
-```js title="test-utils.js"
+  <Tabs groupId="test-utils" defaultValue="jsx" values={[ {label: 'Javascript',
+  value: 'jsx'}, {label: 'Typescript', value: 'tsx'}, ]}>
+
+  <TabItem value="jsx">
+
+```jsx title="test-utils.js"
 // test-utils.js
 import { render, queries } from '@testing-library/react'
 import * as customQueries from './custom-queries'
@@ -209,6 +213,28 @@ export * from '@testing-library/react'
 export { customRender as render }
 ```
 
+  </TabItem>
+
+  <TabItem value="tsx">
+
+```tsx title="test-utils.ts"
+// test-utils.ts
+import { render, queries, RenderOptions } from '@testing-library/react'
+import * as customQueries from './custom-queries'
+import { ReactElement } from 'react'
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'queries'>
+) => render(ui, { queries: { ...queries, ...customQueries }, ...options })
+
+export * from '@testing-library/react'
+export { customRender as render }
+```
+
+  </TabItem>
+  </Tabs>
+
 You can then use your custom queries as you would any other query:
 
 ```js