Replace useRef with useState for useSharedValue

The general idea here is that we can avoid the makeMutable call on every
single render.  This change is also compatible with hot reloading.

src/reanimated2/hook/useSharedValue.ts

@@ -1,5 +1,5 @@
 'use strict';
-import { useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { cancelAnimation } from '../animation';
 import type { SharedValue } from '../commonTypes';
 import { makeMutable } from '../core';
@@ -15,19 +15,11 @@ export function useSharedValue<Value>(
   initialValue: Value,
   oneWayReadsOnly = false
 ): SharedValue<Value> {
-  const ref = useRef<SharedValue<Value>>(
-    makeMutable(initialValue, oneWayReadsOnly)
-  );
-
-  if (ref.current === null) {
-    ref.current = makeMutable(initialValue, oneWayReadsOnly);
-  }
-
+  const [mutable] = useState(() => makeMutable(initialValue, oneWayReadsOnly));
   useEffect(() => {
     return () => {
-      cancelAnimation(ref.current);
+      cancelAnimation(mutable);
     };
   }, []);
-
-  return ref.current;
+  return mutable;
 }