Не работает focus через onClick ( useRef )

export const LogoWrapper = styled.div`
  margin-left: 2rem;
  &:focus {
    animation: ${ logoAnimation } 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
`
В devtools ставлю фокус на этот div -- работает.

в logoRef -- мой div ( вывела в логе )

import React, { useContext, FC, useRef, useState } from 'react'
import { useHistory } from 'react-router-dom'

import { TextContext } from '@context'
import { GraphLogo } from '@icons'
import { 
  HeaderContainer,
  LogoWrapper,
  ContentWrapper,
  LogoText
} from '@layoutComponents/Header/styles'



const Header= (props) => {
  const {txt} = useContext(TextContext)
  const history = useHistory()
  const logoRef = useRef<HTMLDivElement>(null)
  const [animation, setAnimation] = useState(false)
  
  
  // const handleClick = () => {
  //   history.push('/home')
  //   console.log(logoRef.current)
  //   // @ts-ignore
  //   logoRef.current.focus()
  //   const interval = setInterval(() => {
  //      return   logoRef.current!.focus()
  //   }, 5000);
  //   return () => {
  //     clearInterval(interval);
  //   };
  // }
  //
  
  const handleClick = () => {
    setAnimation(!animation)
  }
  
  
  return (
    <HeaderContainer>
      <ContentWrapper>
        <LogoText onClick={handleClick}>{txt.header.mainTitle}</LogoText>
        <LogoWrapper animation={animation}>
          <GraphLogo />
        </LogoWrapper>
      </ContentWrapper> 
    </HeaderContainer>
  )
}

export default Header