minor style refactor

Author: onderonur

apps/demo/src/app/page.tsx

@@ -34,7 +34,7 @@ export default function Page() {
   });
 
   const secondBallRef = useCallback(
-    (node: React.ElementRef<'div'>) => {
+    (node: React.ComponentRef<'div'>) => {
       secondBallRef1(node);
       secondBallRef2(node);
     },
@@ -53,7 +53,7 @@ export default function Page() {
   );
 
   const rootCallback = useCallback(
-    (node: React.ElementRef<'div'>) => {
+    (node: React.ComponentRef<'div'>) => {
       firstBallRootRef(node);
       secondBallRootRef1(node);
       secondBallRootRef2(node);

apps/demo/src/components/ball.tsx

@@ -4,12 +4,12 @@ type BallProps = {
   color: string;
 };
 
-export const Ball = forwardRef<React.ElementRef<'div'>, BallProps>(
+export const Ball = forwardRef<React.ComponentRef<'div'>, BallProps>(
   function Ball({ color }, ref) {
     return (
       <div
         ref={ref}
-        className="mx-auto mb-12 mt-[110vh] h-24 w-24 rounded-full"
+        className="mx-auto mb-12 mt-[110vh] size-24 rounded-full"
         style={{ backgroundColor: color }}
       />
     );