How to log events on frontend dapp from emit_event of smart contract?

Question

I'm currently struggling on obtaining logs of the events emitted from my smart contract on the frontend dapp. The smart contract code itself should work just fine as it emits the event perfectly fine on Substrate UI. It's just the frontend dapp that I'm struggling to do so. This is what I did on my smart contract:

//snippets of code
#[ink(event)]
pub struct GameResult {
  #[ink(topic)]
  win: bool
}    
//skip
//
#[ink(message)]
pub fn playgame(&mut self, amount: Balance) -> Result<(), BetError> {
//skip
//
   self.env().emit_event(GameResult{
   win,
});

I don't really know the syntax to log events on the frontend side but this is my current code for the frontend:

//snippets
.signAndSend(
    props.activeAccount.address,
     { signer: props.signer },
     ({events=[], status}) => {
        if (status.isFinalized) {
            props.api.query.system.events((events) => {
                events.forEach(({ event }) => {
                  if (
                      event.section === "GameContract" &&
                      event.method === "GameResult"
                      ) {
                      console.log("GameResult", event.toJSON());
                        }
                    });
                 });
             }

With the above code, when I do signAndSend, got event arrays and the GameResult events did not get logged. What am I doing wrong? I think my syntax is wrong. Let me know thanks!