TypeError: No se pueden leer propiedades de nulo (leyendo ‘push’) en react.js

Quiero vincular una página interna a un <IconButton>, pero cuando intento hacerlo con <Link> o con onClick={() => router.push(Página)}, devuelve el mismo error: TypeError: No se pueden leer las propiedades de nulo (lectura de 'push'). ¿Cómo puedo resolver este problema? Aquí está el código:

import React from 'react'
import { useRouter } from 'next/router';
import { VStack, IconButton } from '@chakra-ui/react';
import { BsFillPersonFill, BsWrench, BsBriefcaseFill, BsEnvelopeFill } from 'react-icons/bs'
import About from './About';

function Navbar() {
    const router = useRouter()
    return (
        <vstack>

             <iconbutton onclick="{()" =&gt;="" router.push(about)}="" icon=""></iconbutton><bsfillpersonfill></bsfillpersonfill>} rounded="full" right="830" top="-300">
             <iconbutton icon=""></iconbutton><bswrench></bswrench>} rounded="full" right="830" top="-300">
             <iconbutton icon=""></iconbutton><bsbriefcasefill></bsbriefcasefill>} rounded="full" right="830" top="-300">
             <iconbutton icon=""></iconbutton><bsenvelopefill></bsenvelopefill>} rounded="full" right="830" top="-300">

        </vstack>
    )
}

export default Navbar