diff --git a/static/app/components/checkbox.tsx b/static/app/components/checkbox.tsx
index a75963f0aea63f..fc0f84e1aeb603 100644
--- a/static/app/components/checkbox.tsx
+++ b/static/app/components/checkbox.tsx
@@ -1,4 +1,4 @@
-import {useEffect, useRef} from 'react';
+import {useLayoutEffect, useRef} from 'react';
 import type {Theme} from '@emotion/react';
 import {css} from '@emotion/react';
 import type {Interpolation} from '@emotion/styled';
@@ -50,16 +50,15 @@ function Checkbox({
 }: Props) {
   const checkboxRef = useRef<HTMLInputElement>(null);
 
-  // Support setting the indeterminate value, which is only possible through
-  // setting this attribute
-  useEffect(() => {
+  // indeterminate attribute can only be set through javascript
+  useLayoutEffect(() => {
     if (checkboxRef.current) {
       checkboxRef.current.indeterminate = checked === 'indeterminate';
     }
   }, [checked]);
 
   return (
-    <Wrapper {...{className, checked, size}}>
+    <Wrapper className={className} checked={checked} size={size}>
       <HiddenInput
         ref={checkboxRef}
         css={inputCss}
@@ -112,13 +111,13 @@ const HiddenInput = styled('input')`
   &:focus-visible + * {
     ${p =>
       p.checked
-        ? `
-        box-shadow: ${p.theme.focus} 0 0 0 3px;
-      `
-        : `
-        border-color: ${p.theme.focusBorder};
-        box-shadow: ${p.theme.focusBorder} 0 0 0 1px;
-      `}
+        ? css`
+            box-shadow: ${p.theme.focus} 0 0 0 3px;
+          `
+        : css`
+            border-color: ${p.theme.focusBorder};
+            box-shadow: ${p.theme.focusBorder} 0 0 0 1px;
+          `}
   }
 
   &:disabled + * {