<Link />component does not execute function

Question

I have a function for checking the input, it is number or null, but because of the Link component, the conditions are not checked, but the transition is immediately performed through the router. how to first execute the function and then follow the link? Enter 1 work correct number={false}

import React,{useState} from 'react'
import './GetInfo.css'
import { Link } from "react-router-dom";


export const GetInfo = ({setInfo, next, pushInfo, number, text, link, setNext}) => {
  const [defaultValue, setDefaultValue] = useState('')
  const [mistake, setMistake] = useState(false)

  function numberTest(e) {
    if((/^\d+$/).test(e.target.value) && +e.target.value >= 1) {
      setInfo(+e.target.value)
      setDefaultValue(e.target.value)
    }
  }

  const checkValue = () => {
    if (number !== false) {
      pushInfo(number)
      setDefaultValue('')
      setNext(!next)
      return
    }
    setMistake(true)
  }

  return (
    <div className='getInfo'>
      <div className={mistake ? "getInfo__popUp getInfo__popUp--active" : "getInfo__popUp popUp"}>
        <div className='popUp__body'>
          Enter number
          <button className='popUp__btn' onClick={() => {
            setMistake(false)
          }}>Ok</button>
        </div>
      </div>
      <label className='getInfo__title' htmlFor='getInfo__input'>{text}</label>
      <input className='getInfo__input' id='getInfo__input' type="text" value={defaultValue} 
        onChange={e => {
          numberTest(e)
        }}/>
      {link ? (
        <Link to={`/${link}`} onClick={()=> {
          checkValue()
        }}>
          <button className='getInfo__btn'>Enter 2</button>
        </Link>
      ):(
        <button className='getInfo__btn' onClick={()=> {
          checkValue()
        }}>Enter 1</button>
      )}
    </div>
  )
}