How to use the react-pose.img function in react-pose

key={`s-${i.id}`}
                text={i.id}
                style={{ background: 'red', width: 100, height: 100 }}
                pose={should_flip ? 'flipped' : 'enter'}
                onDel={() => this.remove(i)}
                onFlip={() => this.flip(i)}
              />
            );
          })}
        
      
    );
  }
}

const Img = posed.img({
  dull: {
    filter: 'grayscale(100%) brightness(100%)'
  },
  coloured: {
    filter: 'grayscale(0%) brightness(100%)'
  }
});

export const Filter = () => (
  <img src="https://popmotion.io/images/dusk.jpg">
);

`;

const Label = styled(
  posed.span({
    init: { color: '#000' },
    drag: { color: '#f00' }
  })
)``;

export const DragChildren = () => (
  
    <label>Drag me</label>
  
);

export const SingleFilter = posed.img({
  hoverable: true,
  init: { filter: 'blur(2px)' },
  hover: { filter: 'blur(0px)' }
});

const DynamicPositionedBox = styled(
  posed.div({
    move: {
      x: () =&gt; Math.random() * 200,
      y: () =&gt; Math.random() * 200
    }
  })
)`
  width: 100px;
  height: 100px;
  background: hotpink;

}
`;

const MainPagePic = styled(posed.div(fadeEnterConfig))`
  position: absolute;
  bottom: 0;
  right: -10%;
  width: 70%;
  z-index: -1;

  ${mediaSize.phone`
    width: 105%;
  `};
`;

const Logo = posed.img({
  enter: {
    x: -200,
    opacity: 0
  },
  normal: {
    x: 0,
    opacity: 1,
    transition: { duration: 500 }
  }
});

class HomePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      iconAnimate: false,