React-spring - Animated div removes onclick function

Question

I'm facing problem with my onClick function which is on a element. Without React-spring animations it works perfectly. But since I've added animations to it, function is not working. No errors in console, and I really can't find any problems like this on google. Have you encountered this type of problem?

Declaring an animation

import {useTransition, animated} from 'react-spring';

const gameOptionsTransitions = useTransition(showGameOptions, null, {
 from: { opacity: 0, transform:'translateY(200px)' },
 enter: { opacity: 1, transform:'translateY(0)' },
 leave: { opacity: 0, transform:'translateY(200px)'}
});

In return

{gameOptionsTransitions.map(({ item, key, props }) =>
      item && 
          <animated.div key={key} style={props}>
              <Link to="/play">
                  <a className="playerVsComputer-btn" onClick={props.playPlayerVsComputer}>Player vs. Computer</a>
              </Link>
                
              <Link to="/play">
                  <a className="playerVsComputer-btn" onClick={props.playPlayerVsPlayer}>Player vs. Player</a>
              </Link>

              <form onSubmit={handleSubmit}>
                  <input type="text" ref={sizeOfBoard} onChange={removeHighlightInput} autoFocus />
              </form>
          </animated.div>
  )};

As you can see, both of a elements are wrapped in Link element. So after click, you will be redirected to that path but also function should be fired. This function is sent to this component from App.js as a prop. I've tried to move whole onClick={props.playPlayerVsComputer} from a element to Link but nothing changes.

Sent function

  function playPlayerVsPlayer(){
    setPlayerVsPlayer({
      AI:false,
      AImove:false
    });

    setDimensions({
      rows:"3",
      columns:"3"
    })

    generateMatrix(3,3);
  }

This function sets dimensions state and then create matrix according to these dimensions. Then generateMatrix function fires another function, which renders rows x columns table to App. But it's not that important because there will be problem with that animated div, not with these functions.

Answer 1

I've changed animated div like this, so Link element don't have any other elements inside, also classNames moved to Link element.

{gameOptionsTransitions.map(({ item, key, props }) =>
    item && 
        <animated.div key={key} style={props}>
            <Link to="/play" className="setGameMode-btn" onClick={playPlayerVsComputer}>
                Player vs. Computer
            </Link>
    
            <Link to="/play" className="setGameMode-btn" onClick={playPlayerVsPlayer}>
                Player vs. Player
            </Link>

            <form onSubmit={handleSubmit}>
                <input type="text" ref={sizeOfBoard} onChange={removeHighlightInput} autoFocus />
            </form>
        </animated.div>
)};

For onClick events I have created two new functions which are calling these functions from App.js as a props.

//Fire animations sent as a props
function playPlayerVsComputer(){
    props.playPlayerVsComputer();
}

function playPlayerVsPlayer(){
    props.playPlayerVsPlayer();
}