How to use the @react-spring/animated.AnimatedValue function in @react-spring/animated

it('accepts Animated values in custom style prop', () => {
    const Name = forwardRef<
      HTMLHeadingElement,
      { style: { color: string; opacity?: number }; children: React.ReactNode }
    >((props, ref) => (
      <h2 style="{props.style}">
        {props.children}
      </h2>
    ));
    const AnimatedName = animated(Name);
    const opacity = new AnimatedValue(0.5);
    const { queryByText } = render(
      
        Text
      
    );
    const div: any = queryByText('Text')!;
    expect(div).toBeTruthy();
    expect(div.style.opacity).toBe('0.5');
    opacity.setValue(1);
    expect(div.style.opacity).toBe('1');
  });

it('accepts Animated values in style prop', () => {
    const AnimatedDiv = animated('div');
    const opacity = new AnimatedValue(0);
    const { queryByText } = render(
      Text
    );
    const div: any = queryByText('Text')!;
    expect(div).toBeTruthy();
    expect(div.style.opacity).toBe('0');
    opacity.setValue(1);
    expect(div.style.opacity).toBe('1');
  });

it('wraps a component', () => {
    const Name = forwardRef<
      HTMLHeadingElement,
      { name: string; other: string; children: React.ReactNode }
    >((props, ref) => (
      <h2 title="{props.name}">
        {props.children}
      </h2>
    ));
    const AnimatedName = animated(Name);
    const child = new AnimatedValue('Animated Text');
    const name = new AnimatedValue('name');
    const { queryByTitle } = render(
      } other="test"&gt;
        {child}
      
    );
    const el: any = queryByTitle('name')!;
    expect(el).toBeTruthy();
    expect(el.textContent).toBe('Animated Text');
  });

it('accepts scrollTop and scrollLeft properties', () => {
    const AnimatedDiv = animated('div');
    const scrollTop = new AnimatedValue(0);
    const { queryByTestId } = render(
      }
        scrollLeft={new AnimatedValue(0) as SpringValue}
        style={{ height: 100 }}
        data-testid="wrapper">
        <div style="{{">
      
    );
    const wrapper: any = queryByTestId('wrapper')!;
    expect(wrapper.scrollTop).toBe(0);
    expect(wrapper.scrollLeft).toBe(0);
    scrollTop.setValue(20);
    expect(wrapper.scrollTop).toBe(20);
  });
</div>

it('accepts scrollTop and scrollLeft properties', () => {
    const AnimatedDiv = animated('div');
    const scrollTop = new AnimatedValue(0);
    const { queryByTestId } = render(
      }
        scrollLeft={new AnimatedValue(0) as SpringValue}
        style={{ height: 100 }}
        data-testid="wrapper">
        <div style="{{">
      
    );
    const wrapper: any = queryByTestId('wrapper')!;
    expect(wrapper.scrollTop).toBe(0);
    expect(wrapper.scrollLeft).toBe(0);
    scrollTop.setValue(20);
    expect(wrapper.scrollTop).toBe(20);
  });
</div>

it('wraps a component', () => {
    const Name = forwardRef<
      HTMLHeadingElement,
      { name: string; other: string; children: React.ReactNode }
    >((props, ref) => (
      <h2 title="{props.name}">
        {props.children}
      </h2>
    ));
    const AnimatedName = animated(Name);
    const child = new AnimatedValue('Animated Text');
    const name = new AnimatedValue('name');
    const { queryByTitle } = render(
      } other="test"&gt;
        {child}
      
    );
    const el: any = queryByTitle('name')!;
    expect(el).toBeTruthy();
    expect(el.textContent).toBe('Animated Text');
  });

constructor(readonly inputs: Inputs, readonly transforms: Transforms) {
    super()
    this.node = new AnimatedValue(this._compute())
  }