Framer X connected components

Button.tsx

import * as React from 'react';
import { animate } from 'framer';

// This is shared data, it should be imported
import { data } from './Examples';

export class Button extends React.Component {
  render() {
    return (
      <div
        style={style}
        onClick={() => {
          // The same code that is in Examples.RotateTrigger.onTap
          animate.spring(data.rotation, data.rotation.get() + 90, {
            tension: 250,
            friction: 20,
          });
        }}
      >
        Rotate from code
      </div>
    );
  }
}

// just styling, not important

const style: React.CSSProperties = {
  backgroundColor: '#1199EE',
  borderRadius: 11,
  fontFamily: 'SF Pro Text',
  fontSize: 14,
  color: 'white',
  padding: '10px',
  minWidth: 126,
  height: 43,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  boxShadow: '0px 2px 5px 0px rgba(0,0,0,0.25)',
  overflow: 'visible',
};

Examples.tsx

import { Data, animate, Override, Animatable } from 'framer';

export const data = Data({ rotation: Animatable(0) });

export const RotateValue: Override = () => {
  return {
    rotation: data.rotation,
  };
};

export const RotateTrigger: Override = props => {
  data.rotation.set(props.rotation);

  return {
    onTap() {
      animate.spring(data.rotation, data.rotation.get() + 90, {
        tension: 250,
        friction: 20,
      });
    },
  };
};

here is Framer X document
https://drive.google.com/file/d/1jOrnyboifBaye7MwXkRVB4BQI5dMjYXa/view