diff --git a/src/effects/ToneMapping.tsx b/src/effects/ToneMapping.tsx
index 833a4c88..54668cfa 100644
--- a/src/effects/ToneMapping.tsx
+++ b/src/effects/ToneMapping.tsx
@@ -1,4 +1,56 @@
-import { ToneMappingEffect } from 'postprocessing'
-import { wrapEffect } from '../util'
+import { ToneMappingEffect, EffectAttribute } from 'postprocessing'
+import { EffectProps } from '../util'
+import { forwardRef, useEffect, useMemo } from 'react'
 
-export const ToneMapping = wrapEffect(ToneMappingEffect)
+export type ToneMappingProps = EffectProps<typeof ToneMappingEffect>
+
+export const ToneMapping = forwardRef<ToneMappingEffect, ToneMappingProps>(function ToneMapping(
+  {
+    blendFunction,
+    adaptive,
+    mode,
+    resolution,
+    maxLuminance,
+    whitePoint,
+    middleGrey,
+    minLuminance,
+    averageLuminance,
+    adaptationRate,
+    ...props
+  },
+  ref
+) {
+  const effect = useMemo(
+    () =>
+      new ToneMappingEffect({
+        blendFunction,
+        adaptive,
+        mode,
+        resolution,
+        maxLuminance,
+        whitePoint,
+        middleGrey,
+        minLuminance,
+        averageLuminance,
+        adaptationRate,
+      }),
+    [
+      blendFunction,
+      adaptive,
+      mode,
+      resolution,
+      maxLuminance,
+      whitePoint,
+      middleGrey,
+      minLuminance,
+      averageLuminance,
+      adaptationRate,
+    ]
+  )
+
+  useEffect(() => {
+    effect.dispose()
+  }, [effect])
+
+  return <primitive {...props} ref={ref} object={effect} attributes={EffectAttribute.CONVOLUTION} />
+})