refをflopsに降格する場合はforwardRefを使用します

...
const navigation = useRef<HTMLDivElement>(null);
const [changeNavigationStyle,setChangeNavigationStyle] = useState(false)
...

return(
<TopNavigation ref={navigation} {...changeNavigationStyle} />
  )
...

const TopNavigation = forwardRef<HTMLDivElement>((changeNavigationStyle,navigation) => {
  ...
  
 return(
   <MainNavigation ref={navigation} style={changeNavigationStyle ? some : theother} >
     ...
     )
     ...