Custom spinner on react native using Reanimated > 2x + Styled components

CustomSpinner.tsx

import React, { useEffect } from 'react';
import styled from 'styled-components/native';
import Animated, {
  cancelAnimation,
  Easing,
  useAnimatedStyle,
  useSharedValue,
  withRepeat,
  withTiming,
} from 'react-native-reanimated';

export const StyledSpinner = styled(Animated.View)`
  height: 34px;
  width: 34px;
  border-radius: 90px;
  border-width: 3px;
  border-top-color: 'transparent';
  border-right-color: 'transparent';
  border-bottom-color:'transparent';
  border-left-color: 'red'
`;

export const ThemedLoadingSpinner: React.FC = () => {
  const rotation = useSharedValue(0);
  const animatedStyles = useAnimatedStyle(() => {
    return {
      transform: [
        {
          rotateZ: `${rotation.value}deg`,
        },
      ],
    };
  }, [rotation.value]);

  useEffect(() => {
    rotation.value = withRepeat(
      withTiming(360, {
        duration: 1000,
        easing: Easing.linear,
      }),
      200
    );
    return () => cancelAnimation(rotation);
  }, []);

  return <StyledSpinner style={[animatedStyles]} />;
};