CSS hover NOT WORKING anywhere in this React Component

Question

I have a simple react component that I'm working on now, and CSS:hover that normally I alwas use in the stylesheet and that is always working, is just literally not working anywhere in this component. I am trying to understand what might be causing it. Would appreciate any help. This is the component.

import React, { Component } from 'react';
import './index.css';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEdit } from '@fortawesome/free-solid-svg-icons';
import { faTrash } from '@fortawesome/free-solid-svg-icons';

class MenuSearchOutput extends Component {
  render(){
    return(
      <div className="menuSearchOutputRoot">
          <div className="menuSearchOutputVoidLeft"></div>
          <div className="menuSearchOutputLeft">Burgers</div>
          <div className="menuSearchOutputRight">
              <FontAwesomeIcon id="menuSearchElementEdit" icon={faEdit}/>
              <FontAwesomeIcon id="menuSearchElementDelete" icon={faTrash}/>
          </div>
      </div>
    )
  }
}

export default MenuSearchOutput;



 .menuSearchOutputRoot{
        display:flex;
        flex-direction:row;
        align-items:center;
        height:50px;
        width:100%;
        background-color:lightcyan;
        border-bottom: solid cyan 1px;
    }
    .menuSearchOutputVoidLeft{
        height:50px;
        width:2%;
    }
    .menuSearchOutputLeft{
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        height:32px;
        width: 68%;
        background-color:white;
        color:black;
    }
    .menuSearchOutputRight{
        display:flex;
        flex-direction:row;
        justify-content:space-evenly;
        align-items:center;
        height:50px;
        width:30%;
    }
    #menuSearchElementDelete:hover{
        opacity:0.8;
        cursor:pointer;
    }
    #menuSearchElementEdit:hover{
        opacity:0.8;
        cursor:pointer;
    }

Answer 1

You may be receiving an error because the id variable does not exist.

export function FontAwesomeIcon(props: Props): JSX.Element

export interface Props {
  icon: IconProp
  mask?: IconProp
  className?: string
  color?: string
  spin?: boolean
  pulse?: boolean
  border?: boolean
  fixedWidth?: boolean
  inverse?: boolean
  listItem?: boolean
  flip?: FlipProp
  size?: SizeProp
  pull?: PullProp
  rotation?: RotateProp
  transform?: string | Transform
  symbol?: FaSymbol
  style?: CSSProperties
  tabIndex?: number;
  title?: string;
}

parent can define it in div.

<div className="menuSearchOutputRight">
 <div id="menuSearchElementEdit">
  <FontAwesomeIcon  icon={faEdit}/>
 </div>
 <div id="menuSearchElementDelete">
  <FontAwesomeIcon  icon={faTrash}/>
 </div>
</div>