Fishbubble in typescript

fishbubble.tsx

import styled from 'styled-components'

const FishBubble = styled.div<{ x: number; y: number }>`
  top: ${({ y }) => y}%;
  left: ${({ x }) => x}px;
  position: absolute;
  height: 4px;
  width: 4px;
  background-color: white;
  animation: up 1.5s linear forwards;

  @keyframes up {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(-200px);
      opacity: 0;
    }
  }
`