diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index f2e5235530..3f3fc14c82 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -661,11 +661,6 @@ const rules = {
       importNames: ['default'],
       message: 'Use named imports instead.'
     },
-    {
-      name: 'react',
-      importNames: ['useLayoutEffect'],
-      message: 'Use the override from src/hooks instead.'
-    },
     {
       name: 'react-dom',
       importNames: ['default'],
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ab646f0cb7..64429257c7 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -12,21 +12,12 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        react: [18, 19]
-      fail-fast: false
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 22
           check-latest: true
-      - name: set up react 19
-        if: matrix.react == 19
-        run: |
-          node ./.github/workflows/patch-react19.js
-          cat package.json
       - name: npm install
         run: npm i
       - name: Biome
@@ -49,12 +40,11 @@ jobs:
         run: node --run test
         timeout-minutes: 4
       - name: Upload coverage
-        if: matrix.react == 18
         uses: codecov/codecov-action@v4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
       - name: Deploy gh-pages
-        if: matrix.react == 18 && github.event_name == 'push' && github.ref == 'refs/heads/main'
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         run: |
           git config --global user.email 'action@github.com'
           git config --global user.name 'GitHub Action'
diff --git a/.github/workflows/patch-react19.js b/.github/workflows/patch-react19.js
deleted file mode 100644
index d4d9193899..0000000000
--- a/.github/workflows/patch-react19.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import fs from 'node:fs/promises';
-
-const pkgText = await fs.readFile('./package.json', 'utf8');
-const pkg = JSON.parse(pkgText);
-
-pkg.devDependencies['@types/react'] = 'npm:types-react@rc';
-pkg.devDependencies['@types/react-dom'] = 'npm:types-react-dom@rc';
-pkg.devDependencies.react = 'rc';
-pkg.devDependencies['react-dom'] = 'rc';
-pkg.overrides = {
-  '@types/react': 'npm:types-react@rc',
-  '@types/react-dom': 'npm:types-react-dom@rc'
-};
-
-fs.writeFile('./package.json', JSON.stringify(pkg, null, 2));
diff --git a/README.md b/README.md
index e131eac6cf..01b5825973 100644
--- a/README.md
+++ b/README.md
@@ -227,16 +227,16 @@ interface Renderers<TRow, TSummaryRow> {
 }
 ```
 
-For example, the default `<Row />` component can be wrapped via the `renderRow` prop to add context providers or tweak props
+For example, the default `<Row />` component can be wrapped via the `renderRow` prop to add contexts or tweak props
 
 ```tsx
 import DataGrid, { RenderRowProps, Row } from 'react-data-grid';
 
 function myRowRenderer(key: React.Key, props: RenderRowProps<Row>) {
   return (
-    <MyContext.Provider key={key} value={123}>
+    <MyContext key={key} value={123}>
       <Row {...props} />
-    </MyContext.Provider>
+    </MyContext>
   );
 }
 
diff --git a/package.json b/package.json
index f943b3c54b..367d4efa74 100644
--- a/package.json
+++ b/package.json
@@ -73,8 +73,8 @@
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20.10.3",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "@vitejs/plugin-react": "^4.3.1",
@@ -97,10 +97,10 @@
     "playwright": "^1.45.1",
     "postcss": "^8.4.25",
     "prettier": "3.3.3",
-    "react": "^18.3.1",
+    "react": "rc",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "rc",
     "react-router-dom": "^6.11.1",
     "rollup": "^4.0.2",
     "rollup-plugin-postcss": "^4.0.2",
@@ -109,7 +109,11 @@
     "vitest": "^2.0.3"
   },
   "peerDependencies": {
-    "react": "^18.0 || ^19.0",
-    "react-dom": "^18.0 || ^19.0"
+    "react": "rc",
+    "react-dom": "rc"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   }
 }
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 5fd10c4e83..3a74ccea77 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -1,16 +1,22 @@
-import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import type { Key, KeyboardEvent, RefAttributes } from 'react';
+import {
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import type { Key, KeyboardEvent } from 'react';
 import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 
 import {
-  RowSelectionChangeProvider,
-  RowSelectionProvider,
+  RowSelectionChangeContext,
+  RowSelectionContext,
   useCalculatedColumns,
   useColumnWidths,
   useGridDimensions,
   useLatestFunc,
-  useLayoutEffect,
   useViewportColumns,
   useViewportRows
 } from './hooks';
@@ -51,9 +57,9 @@ import type {
 } from './types';
 import { renderCheckbox as defaultRenderCheckbox } from './cellRenderers';
 import {
-  DataGridDefaultRenderersProvider,
+  DataGridDefaultRenderersContext,
   useDefaultRenderers
-} from './DataGridDefaultRenderersProvider';
+} from './DataGridDefaultRenderersContext';
 import DragHandle from './DragHandle';
 import EditCell from './EditCell';
 import GroupedColumnHeaderRow from './GroupedColumnHeaderRow';
@@ -93,7 +99,7 @@ export interface DataGridHandle {
 }
 
 type SharedDivProps = Pick<
-  React.HTMLAttributes<HTMLDivElement>,
+  React.ComponentProps<'div'>,
   | 'role'
   | 'aria-label'
   | 'aria-labelledby'
@@ -104,6 +110,7 @@ type SharedDivProps = Pick<
 >;
 
 export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends SharedDivProps {
+  ref?: Maybe<React.Ref<DataGridHandle>>;
   /**
    * Grid and data Props
    */
@@ -207,11 +214,9 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
  *
  * <DataGrid columns={columns} rows={rows} />
  */
-function DataGrid<R, SR, K extends Key>(
-  props: DataGridProps<R, SR, K>,
-  ref: React.Ref<DataGridHandle>
-) {
+export default function DataGrid<R, SR, K extends Key>(props: DataGridProps<R, SR, K>) {
   const {
+    ref,
     // Grid and data Props
     columns: rawColumns,
     rows,
@@ -1088,9 +1093,9 @@ function DataGrid<R, SR, K extends Key>(
       onKeyDown={handleKeyDown}
       data-testid={testId}
     >
-      <DataGridDefaultRenderersProvider value={defaultGridComponents}>
-        <RowSelectionChangeProvider value={selectRowLatest}>
-          <RowSelectionProvider value={allRowsSelected}>
+      <DataGridDefaultRenderersContext value={defaultGridComponents}>
+        <RowSelectionChangeContext value={selectRowLatest}>
+          <RowSelectionContext value={allRowsSelected}>
             {Array.from({ length: groupedColumnHeaderRowsCount }, (_, index) => (
               <GroupedColumnHeaderRow
                 key={index}
@@ -1118,7 +1123,7 @@ function DataGrid<R, SR, K extends Key>(
               shouldFocusGrid={!selectedCellIsWithinSelectionBounds}
               direction={direction}
             />
-          </RowSelectionProvider>
+          </RowSelectionContext>
           {rows.length === 0 && noRowsFallback ? (
             noRowsFallback
           ) : (
@@ -1179,8 +1184,8 @@ function DataGrid<R, SR, K extends Key>(
               })}
             </>
           )}
-        </RowSelectionChangeProvider>
-      </DataGridDefaultRenderersProvider>
+        </RowSelectionChangeContext>
+      </DataGridDefaultRenderersContext>
 
       {renderDragHandle()}
 
@@ -1223,7 +1228,3 @@ function getCellToScroll(gridEl: HTMLDivElement) {
 function isSamePosition(p1: Position, p2: Position) {
   return p1.idx === p2.idx && p1.rowIdx === p2.rowIdx;
 }
-
-export default forwardRef(DataGrid) as <R, SR = unknown, K extends Key = Key>(
-  props: DataGridProps<R, SR, K> & RefAttributes<DataGridHandle>
-) => React.JSX.Element;
diff --git a/src/DataGridDefaultRenderersProvider.ts b/src/DataGridDefaultRenderersContext.ts
similarity index 61%
rename from src/DataGridDefaultRenderersProvider.ts
rename to src/DataGridDefaultRenderersContext.ts
index 79d0df609e..5cf1bcbe10 100644
--- a/src/DataGridDefaultRenderersProvider.ts
+++ b/src/DataGridDefaultRenderersContext.ts
@@ -3,9 +3,7 @@ import { createContext, useContext } from 'react';
 import type { Maybe, Renderers } from './types';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const DataGridDefaultRenderersContext = createContext<Maybe<Renderers<any, any>>>(undefined);
-
-export const DataGridDefaultRenderersProvider = DataGridDefaultRenderersContext.Provider;
+export const DataGridDefaultRenderersContext = createContext<Maybe<Renderers<any, any>>>(undefined);
 
 export function useDefaultRenderers<R, SR>(): Maybe<Renderers<R, SR>> {
   return useContext(DataGridDefaultRenderersContext);
diff --git a/src/EditCell.tsx b/src/EditCell.tsx
index 436f591ea3..2ede7736de 100644
--- a/src/EditCell.tsx
+++ b/src/EditCell.tsx
@@ -56,7 +56,7 @@ export default function EditCell<R, SR>({
   onKeyDown,
   navigate
 }: EditCellProps<R, SR>) {
-  const frameRequestRef = useRef<number | undefined>(undefined);
+  const frameRequestRef = useRef<number>(undefined);
   const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
 
   // We need to prevent the `useEffect` from cleaning up between re-renders,
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index fcf023425c..d36abc8068 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -2,7 +2,7 @@ import { memo } from 'react';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
-import { RowSelectionProvider } from './hooks';
+import { RowSelectionContext } from './hooks';
 import { getRowStyle } from './utils';
 import type { BaseRenderRowProps, GroupRow } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
@@ -52,7 +52,7 @@ function GroupedRow<R, SR>({
   }
 
   return (
-    <RowSelectionProvider value={isRowSelected}>
+    <RowSelectionContext value={isRowSelected}>
       <div
         role="row"
         aria-level={row.level + 1} // aria-level is 1-based
@@ -86,7 +86,7 @@ function GroupedRow<R, SR>({
           />
         ))}
       </div>
-    </RowSelectionProvider>
+    </RowSelectionContext>
   );
 }
 
diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx
index 2dde6d2fe0..d022ac33e8 100644
--- a/src/HeaderCell.tsx
+++ b/src/HeaderCell.tsx
@@ -245,7 +245,7 @@ export default function HeaderCell<R, SR>({
     }
   }
 
-  let draggableProps: React.HTMLAttributes<HTMLDivElement> | undefined;
+  let draggableProps: React.ComponentProps<'div'> | undefined;
   if (draggable) {
     draggableProps = {
       draggable: true,
diff --git a/src/Row.tsx b/src/Row.tsx
index 98f0a4778f..86709215e7 100644
--- a/src/Row.tsx
+++ b/src/Row.tsx
@@ -1,37 +1,34 @@
-import { forwardRef, memo, type RefAttributes } from 'react';
+import { memo } from 'react';
 import clsx from 'clsx';
 
-import { RowSelectionProvider, useLatestFunc } from './hooks';
+import { RowSelectionContext, useLatestFunc } from './hooks';
 import { getColSpan, getRowStyle } from './utils';
 import type { CalculatedColumn, RenderRowProps } from './types';
 import Cell from './Cell';
 import { rowClassname, rowSelectedClassname } from './style/row';
 
-function Row<R, SR>(
-  {
-    className,
-    rowIdx,
-    gridRowStart,
-    selectedCellIdx,
-    isRowSelected,
-    copiedCellIdx,
-    draggedOverCellIdx,
-    lastFrozenColumnIndex,
-    row,
-    viewportColumns,
-    selectedCellEditor,
-    onCellClick,
-    onCellDoubleClick,
-    onCellContextMenu,
-    rowClass,
-    setDraggedOverRowIdx,
-    onMouseEnter,
-    onRowChange,
-    selectCell,
-    ...props
-  }: RenderRowProps<R, SR>,
-  ref: React.Ref<HTMLDivElement>
-) {
+function Row<R, SR>({
+  className,
+  rowIdx,
+  gridRowStart,
+  selectedCellIdx,
+  isRowSelected,
+  copiedCellIdx,
+  draggedOverCellIdx,
+  lastFrozenColumnIndex,
+  row,
+  viewportColumns,
+  selectedCellEditor,
+  onCellClick,
+  onCellDoubleClick,
+  onCellContextMenu,
+  rowClass,
+  setDraggedOverRowIdx,
+  onMouseEnter,
+  onRowChange,
+  selectCell,
+  ...props
+}: RenderRowProps<R, SR>) {
   const handleRowChange = useLatestFunc((column: CalculatedColumn<R, SR>, newRow: R) => {
     onRowChange(column, rowIdx, newRow);
   });
@@ -87,10 +84,9 @@ function Row<R, SR>(
   }
 
   return (
-    <RowSelectionProvider value={isRowSelected}>
+    <RowSelectionContext value={isRowSelected}>
       <div
         role="row"
-        ref={ref}
         className={className}
         onMouseEnter={handleDragEnter}
         style={getRowStyle(gridRowStart)}
@@ -98,13 +94,11 @@ function Row<R, SR>(
       >
         {cells}
       </div>
-    </RowSelectionProvider>
+    </RowSelectionContext>
   );
 }
 
-const RowComponent = memo(forwardRef(Row)) as <R, SR>(
-  props: RenderRowProps<R, SR> & RefAttributes<HTMLDivElement>
-) => React.JSX.Element;
+const RowComponent = memo(Row) as <R, SR>(props: RenderRowProps<R, SR>) => React.JSX.Element;
 
 export default RowComponent;
 
diff --git a/src/ScrollToCell.tsx b/src/ScrollToCell.tsx
index 7fca2ce353..b2b0c7f550 100644
--- a/src/ScrollToCell.tsx
+++ b/src/ScrollToCell.tsx
@@ -1,6 +1,5 @@
-import { useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 
-import { useLayoutEffect } from './hooks';
 import { scrollIntoView } from './utils';
 
 export interface PartialPosition {
diff --git a/src/TreeDataGrid.tsx b/src/TreeDataGrid.tsx
index 06a0749133..98345c353a 100644
--- a/src/TreeDataGrid.tsx
+++ b/src/TreeDataGrid.tsx
@@ -1,5 +1,5 @@
-import { forwardRef, useCallback, useMemo } from 'react';
-import type { Key, RefAttributes } from 'react';
+import { useCallback, useMemo } from 'react';
+import type { Key } from 'react';
 
 import { useLatestFunc } from './hooks';
 import { assertIsValidKeyGetter, isCtrlKeyHeldDown } from './utils';
@@ -17,8 +17,8 @@ import type {
 import { renderToggleGroup } from './cellRenderers';
 import { SELECT_COLUMN_KEY } from './Columns';
 import DataGrid from './DataGrid';
-import type { DataGridHandle, DataGridProps } from './DataGrid';
-import { useDefaultRenderers } from './DataGridDefaultRenderersProvider';
+import type { DataGridProps } from './DataGrid';
+import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
 import GroupedRow from './GroupRow';
 import { defaultRenderRow } from './Row';
 
@@ -47,25 +47,22 @@ type GroupByDictionary<TRow> = Record<
   }
 >;
 
-function TreeDataGrid<R, SR, K extends Key>(
-  {
-    columns: rawColumns,
-    rows: rawRows,
-    rowHeight: rawRowHeight,
-    rowKeyGetter: rawRowKeyGetter,
-    onCellKeyDown: rawOnCellKeyDown,
-    onRowsChange,
-    selectedRows: rawSelectedRows,
-    onSelectedRowsChange: rawOnSelectedRowsChange,
-    renderers,
-    groupBy: rawGroupBy,
-    rowGrouper,
-    expandedGroupIds,
-    onExpandedGroupIdsChange,
-    ...props
-  }: TreeDataGridProps<R, SR, K>,
-  ref: React.Ref<DataGridHandle>
-) {
+export function TreeDataGrid<R, SR, K extends Key>({
+  columns: rawColumns,
+  rows: rawRows,
+  rowHeight: rawRowHeight,
+  rowKeyGetter: rawRowKeyGetter,
+  onCellKeyDown: rawOnCellKeyDown,
+  onRowsChange,
+  selectedRows: rawSelectedRows,
+  onSelectedRowsChange: rawOnSelectedRowsChange,
+  renderers,
+  groupBy: rawGroupBy,
+  rowGrouper,
+  expandedGroupIds,
+  onExpandedGroupIdsChange,
+  ...props
+}: TreeDataGridProps<R, SR, K>) {
   const defaultRenderers = useDefaultRenderers<R, SR>();
   const rawRenderRow = renderers?.renderRow ?? defaultRenderers?.renderRow ?? defaultRenderRow;
   const headerAndTopSummaryRowsCount = 1 + (props.topSummaryRows?.length ?? 0);
@@ -416,7 +413,6 @@ function TreeDataGrid<R, SR, K extends Key>(
       aria-rowcount={
         rowsCount + 1 + (props.topSummaryRows?.length ?? 0) + (props.bottomSummaryRows?.length ?? 0)
       }
-      ref={ref}
       columns={columns}
       rows={rows as R[]} // TODO: check types
       rowHeight={rowHeight}
@@ -436,7 +432,3 @@ function TreeDataGrid<R, SR, K extends Key>(
 function isReadonlyArray(arr: unknown): arr is readonly unknown[] {
   return Array.isArray(arr);
 }
-
-export default forwardRef(TreeDataGrid) as <R, SR = unknown, K extends Key = Key>(
-  props: TreeDataGridProps<R, SR, K> & RefAttributes<DataGridHandle>
-) => React.JSX.Element;
diff --git a/src/cellRenderers/SelectCellFormatter.tsx b/src/cellRenderers/SelectCellFormatter.tsx
index 8b8fe62f11..865e450806 100644
--- a/src/cellRenderers/SelectCellFormatter.tsx
+++ b/src/cellRenderers/SelectCellFormatter.tsx
@@ -1,5 +1,5 @@
 import type { RenderCheckboxProps } from '../types';
-import { useDefaultRenderers } from '../DataGridDefaultRenderersProvider';
+import { useDefaultRenderers } from '../DataGridDefaultRenderersContext';
 
 type SharedInputProps = Pick<
   RenderCheckboxProps,
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index c836ce472f..709f729be0 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -2,7 +2,6 @@ export * from './useCalculatedColumns';
 export * from './useColumnWidths';
 export * from './useGridDimensions';
 export * from './useLatestFunc';
-export * from './useLayoutEffect';
 export * from './useRovingTabIndex';
 export * from './useRowSelection';
 export * from './useViewportColumns';
diff --git a/src/hooks/useColumnWidths.ts b/src/hooks/useColumnWidths.ts
index 57d46f70da..830d1623c5 100644
--- a/src/hooks/useColumnWidths.ts
+++ b/src/hooks/useColumnWidths.ts
@@ -1,8 +1,7 @@
-import { useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import { flushSync } from 'react-dom';
 
 import type { CalculatedColumn, StateSetter } from '../types';
-import { useLayoutEffect } from './useLayoutEffect';
 import type { DataGridProps } from '../DataGrid';
 
 export function useColumnWidths<R, SR>(
diff --git a/src/hooks/useGridDimensions.ts b/src/hooks/useGridDimensions.ts
index ee7df45b4b..ddd2ac67e3 100644
--- a/src/hooks/useGridDimensions.ts
+++ b/src/hooks/useGridDimensions.ts
@@ -1,8 +1,6 @@
-import { useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
 
-import { useLayoutEffect } from './useLayoutEffect';
-
 export function useGridDimensions() {
   const gridRef = useRef<HTMLDivElement>(null);
   const [inlineSize, setInlineSize] = useState(1);
diff --git a/src/hooks/useLayoutEffect.ts b/src/hooks/useLayoutEffect.ts
deleted file mode 100644
index 8700637319..0000000000
--- a/src/hooks/useLayoutEffect.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { useEffect, useLayoutEffect as useOriginalLayoutEffect } from 'react';
-
-// Silence silly warning
-// https://reactjs.org/link/uselayouteffect-ssr
-export const useLayoutEffect = typeof window === 'undefined' ? useEffect : useOriginalLayoutEffect;
diff --git a/src/hooks/useRowSelection.ts b/src/hooks/useRowSelection.ts
index c5a1635357..2be4b03fdc 100644
--- a/src/hooks/useRowSelection.ts
+++ b/src/hooks/useRowSelection.ts
@@ -2,17 +2,13 @@ import { createContext, useContext } from 'react';
 
 import type { SelectRowEvent } from '../types';
 
-const RowSelectionContext = createContext<boolean | undefined>(undefined);
+export const RowSelectionContext = createContext<boolean | undefined>(undefined);
 
-export const RowSelectionProvider = RowSelectionContext.Provider;
-
-const RowSelectionChangeContext = createContext<
+export const RowSelectionChangeContext = createContext<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ((selectRowEvent: SelectRowEvent<any>) => void) | undefined
 >(undefined);
 
-export const RowSelectionChangeProvider = RowSelectionChangeContext.Provider;
-
 export function useRowSelection<R>(): [boolean, (selectRowEvent: SelectRowEvent<R>) => void] {
   const rowSelectionContext = useContext(RowSelectionContext);
   const rowSelectionChangeContext = useContext(RowSelectionChangeContext);
diff --git a/src/index.ts b/src/index.ts
index 270d71def0..5024902200 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,8 @@
 import './style/layers.css';
 
 export { default, type DataGridProps, type DataGridHandle } from './DataGrid';
-export { default as TreeDataGrid, type TreeDataGridProps } from './TreeDataGrid';
-export { DataGridDefaultRenderersProvider } from './DataGridDefaultRenderersProvider';
+export { TreeDataGrid, type TreeDataGridProps } from './TreeDataGrid';
+export { DataGridDefaultRenderersContext } from './DataGridDefaultRenderersContext';
 export { default as Row } from './Row';
 export * from './Columns';
 export * from './cellRenderers';
diff --git a/src/renderHeaderCell.tsx b/src/renderHeaderCell.tsx
index 1338a932d3..d7a848359d 100644
--- a/src/renderHeaderCell.tsx
+++ b/src/renderHeaderCell.tsx
@@ -1,7 +1,7 @@
 import { css } from '@linaria/core';
 
 import type { RenderHeaderCellProps } from './types';
-import { useDefaultRenderers } from './DataGridDefaultRenderersProvider';
+import { useDefaultRenderers } from './DataGridDefaultRenderersContext';
 
 const headerSortCellClassname = css`
   @layer rdg.SortableHeaderCell {
diff --git a/src/types.ts b/src/types.ts
index 2c8d7abc63..9e2256d280 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -144,7 +144,7 @@ export interface RenderHeaderCellProps<TRow, TSummaryRow = unknown> {
 export interface CellRendererProps<TRow, TSummaryRow>
   extends Pick<RenderRowProps<TRow, TSummaryRow>, 'row' | 'rowIdx' | 'selectCell'>,
     Omit<
-      React.HTMLAttributes<HTMLDivElement>,
+      React.ComponentProps<'div'>,
       'style' | 'children' | 'onClick' | 'onDoubleClick' | 'onContextMenu'
     > {
   column: CalculatedColumn<TRow, TSummaryRow>;
@@ -201,7 +201,7 @@ export interface CellSelectArgs<TRow, TSummaryRow = unknown> {
 }
 
 export interface BaseRenderRowProps<TRow, TSummaryRow = unknown>
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'>,
+  extends Omit<React.ComponentProps<'div'>, 'style' | 'children'>,
     Pick<
       DataGridProps<TRow, TSummaryRow>,
       'onCellClick' | 'onCellDoubleClick' | 'onCellContextMenu'
@@ -294,7 +294,7 @@ export interface RenderSortStatusProps extends RenderSortIconProps, RenderSortPr
 
 export interface RenderCheckboxProps
   extends Pick<
-    React.InputHTMLAttributes<HTMLInputElement>,
+    React.ComponentProps<'input'>,
     'aria-label' | 'aria-labelledby' | 'checked' | 'tabIndex' | 'disabled'
   > {
   onChange: (checked: boolean, shift: boolean) => void;
diff --git a/test/renderers.test.tsx b/test/renderers.test.tsx
index 52b0b5303e..68a21a4e0f 100644
--- a/test/renderers.test.tsx
+++ b/test/renderers.test.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import DataGrid, { DataGridDefaultRenderersProvider, renderSortIcon, SelectColumn } from '../src';
+import DataGrid, { DataGridDefaultRenderersContext, renderSortIcon, SelectColumn } from '../src';
 import type { Column, DataGridProps, RenderSortStatusProps, SortColumn } from '../src';
 import { getHeaderCells, getRows, setup } from './utils';
 
@@ -66,9 +66,9 @@ function TestGrid<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>) {
   return <DataGrid {...props} sortColumns={sortColumns} onSortColumnsChange={setSortColumns} />;
 }
 
-function setupProvider<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>) {
+function setupContext<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K>) {
   return render(
-    <DataGridDefaultRenderersProvider
+    <DataGridDefaultRenderersContext
       value={{
         noRowsFallback: <GlobalNoRowsFallback />,
         renderCheckbox: globalRenderCheckbox,
@@ -76,7 +76,7 @@ function setupProvider<R, SR, K extends React.Key>(props: DataGridProps<R, SR, K
       }}
     >
       <TestGrid {...props} />
-    </DataGridDefaultRenderersProvider>
+    </DataGridDefaultRenderersContext>
   );
 }
 
@@ -87,15 +87,15 @@ test('fallback defined using renderers prop with no rows', () => {
   expect(screen.getByText('Local no rows fallback')).toBeInTheDocument();
 });
 
-test('fallback defined using provider with no rows', () => {
-  setupProvider({ columns, rows: noRows });
+test('fallback defined using context with no rows', () => {
+  setupContext({ columns, rows: noRows });
 
   expect(getRows()).toHaveLength(0);
   expect(screen.getByText('Global no rows fallback')).toBeInTheDocument();
 });
 
-test('fallback defined using both provider and renderers with no rows', () => {
-  setupProvider({ columns, rows: noRows, renderers: { noRowsFallback: <NoRowsFallback /> } });
+test('fallback defined using both context and renderers with no rows', () => {
+  setupContext({ columns, rows: noRows, renderers: { noRowsFallback: <NoRowsFallback /> } });
 
   expect(getRows()).toHaveLength(0);
   expect(screen.getByText('Local no rows fallback')).toBeInTheDocument();
@@ -108,15 +108,15 @@ test('fallback defined using renderers prop with a row', () => {
   expect(screen.queryByText('Local no rows fallback')).not.toBeInTheDocument();
 });
 
-test('fallback defined using provider with a row', () => {
-  setupProvider({ columns, rows: [{ id: 1 }] });
+test('fallback defined using context with a row', () => {
+  setupContext({ columns, rows: [{ id: 1 }] });
 
   expect(getRows()).toHaveLength(1);
   expect(screen.queryByText('Global no rows fallback')).not.toBeInTheDocument();
 });
 
-test('fallback defined using both provider and renderers with a row', () => {
-  setupProvider({ columns, rows: [{ id: 1 }], renderers: { noRowsFallback: <NoRowsFallback /> } });
+test('fallback defined using both context and renderers with a row', () => {
+  setupContext({ columns, rows: [{ id: 1 }], renderers: { noRowsFallback: <NoRowsFallback /> } });
 
   expect(getRows()).toHaveLength(1);
   expect(screen.queryByText('Global no rows fallback')).not.toBeInTheDocument();
@@ -130,23 +130,23 @@ test('checkbox defined using renderers prop', () => {
   expect(screen.getByText('Local checkbox')).toBeInTheDocument();
 });
 
-test('checkbox defined using provider', () => {
-  setupProvider({ columns, rows: noRows });
+test('checkbox defined using context', () => {
+  setupContext({ columns, rows: noRows });
 
   expect(getRows()).toHaveLength(0);
   expect(screen.getByText('Global checkbox')).toBeInTheDocument();
 });
 
-test('checkbox defined using both provider and renderers', () => {
-  setupProvider({ columns, rows: noRows, renderers: { renderCheckbox: localRenderCheckbox } });
+test('checkbox defined using both context and renderers', () => {
+  setupContext({ columns, rows: noRows, renderers: { renderCheckbox: localRenderCheckbox } });
 
   expect(getRows()).toHaveLength(0);
   expect(screen.getByText('Local checkbox')).toBeInTheDocument();
   expect(screen.queryByText('Global checkbox')).not.toBeInTheDocument();
 });
 
-test('sortPriority defined using both providers', async () => {
-  setupProvider({ columns, rows: noRows });
+test('sortPriority defined using both contexts', async () => {
+  setupContext({ columns, rows: noRows });
 
   const [, headerCell2, headerCell3] = getHeaderCells();
   const user = userEvent.setup();
@@ -161,8 +161,8 @@ test('sortPriority defined using both providers', async () => {
   expect(screen.queryByTestId('local-sort-priority')).not.toBeInTheDocument();
 });
 
-test('sortPriority defined using both providers and renderers', async () => {
-  setupProvider({ columns, rows: noRows, renderers: { renderSortStatus } });
+test('sortPriority defined using both contexts and renderers', async () => {
+  setupContext({ columns, rows: noRows, renderers: { renderSortStatus } });
 
   const [, headerCell2, headerCell3] = getHeaderCells();
   const user = userEvent.setup();
diff --git a/website/demos/ContextMenu.tsx b/website/demos/ContextMenu.tsx
index 61691e9e6c..50be750dd0 100644
--- a/website/demos/ContextMenu.tsx
+++ b/website/demos/ContextMenu.tsx
@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useLayoutEffect, useReducer, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { faker } from '@faker-js/faker';
@@ -58,7 +57,7 @@ export default function ContextMenuDemo({ direction }: Props) {
     top: number;
     left: number;
   } | null>(null);
-  const menuRef = useRef<HTMLMenuElement | null>(null);
+  const menuRef = useRef<HTMLMenuElement>(null);
   const isContextMenuOpen = contextMenuProps !== null;
 
   useLayoutEffect(() => {
diff --git a/website/demos/HeaderFilters.tsx b/website/demos/HeaderFilters.tsx
index d9ddcb98fc..c6cb1bf799 100644
--- a/website/demos/HeaderFilters.tsx
+++ b/website/demos/HeaderFilters.tsx
@@ -281,7 +281,7 @@ export default function HeaderFilters({ direction }: Props) {
           Clear Filters
         </button>
       </div>
-      <FilterContext.Provider value={filters}>
+      <FilterContext value={filters}>
         <DataGrid
           className={filters.enabled ? filterContainerClassname : undefined}
           columns={columns}
@@ -289,7 +289,7 @@ export default function HeaderFilters({ direction }: Props) {
           headerRowHeight={filters.enabled ? 70 : undefined}
           direction={direction}
         />
-      </FilterContext.Provider>
+      </FilterContext>
       <datalist id="developers">
         {developerOptions.map(({ label, value }) => (
           <option key={value} value={value}>