javascript - React-Icon Library を使用してアイコンにカーソルを合わせたときにテキストを表示する

Question

マウスの上にカーソルを置いたときにテキストを表示しようとしています。私はReact-Iconsライブラリを使用しており、Styled-Componentsを使用してスタイリングしています

ナビゲーションバーに 4 つのアイコンがあります - ホーム - 概要 - スキル - 仕事

各ボタンは、ホバーが適切に機能するための独自のコンポーネントであるため、1 つのアイコンにカーソルを合わせると、すべてのアイコンのテキストが表示されません。

import React, { useState } from 'react';
import { SkillsButton } from './SkillsBtnElements'

const SkillsBtn = () => {
  const [hover, setHover] = useState(false);
  const onHover = () => {
    setHover(!hover)
  }

  return (
    <div onMouseEnter={onHover} onMouseLeave={onHover} role="button" tabIndex='-3' >
      { hover ? "SKILLS" : <SkillsButton /> }
    </div>
  )
}

export default SkillsBtn;

そして、スタイリングのために私は持っています

import styled from 'styled-components';
import { GiGearHammer } from 'react-icons/gi';

export const SkillsButton = styled(GiGearHammer)`
  font-size: 1.75rem;
  color: white;
  flex-grow: 1;
  cursor: pointer;
  @media screen and (max-width: 960px) {
    transition: all 0.2s ease-in-out;
    font-size: 1rem;
    color: white;
  }
  &:hover {
    transition: all 0.2s ease-in-out;
  }
`;

私はホバー効果を達成しますが、アイコンを常にホバーするとロジックがめちゃくちゃになるように見えます。その後、テキストのみが表示され、テキストの上にホバーするとアイコンが表示されます...これは望ましい効果ではありません

例: https://gph.is/g/4ARQoRV