Show and hide Div element from one component to svg path hover in a second component: Angular

Question

My goal is to be able to hover over a country that is an svg path and have information on the right to show and disappear. The info is on a different component than the svg. I've been able to show the info on hover, but it doesn't seem that the "visible = false" is working on mouseleave. It just keeps adding a card underneath the first card that shows when hovering over a different country (I'll attach a screenshot).

I have to use mouse events on the svg and I have to have different components using Angular. The weird thing is when I tested the functions on a button that I put in the country-info html, the show and hide idea worked perfectly fine but for some reason the svg is being a pain in the butt.

I've tried multiple different approaches and settled for the setup I have now as the concept makes the most sense to me. The idea I had was to assign 'visible' to the cardContainer, set visible as a boolean and to true. Then I import the info component to the map component to access 'visible ' and assign the appropriate values to show (on cardShow function) and hide (on cardHide function). Then I call the functions in the svg path on mouseenter and mouseleave.

Code for the information component:

country-info.component.html

<div class="cardContainer" *ngIf="visible"></div>

country-info.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-country-info',
  templateUrl: 'country-info.component.html',
  styleUrls: ['./country-info.component.css']
})

export class CountryInfoComponent implements OnInit {

  constructor() {}

  ngOnInit() {}
  
  visible:boolean = true;
  public cardShow(id) {
    display(id);
    this.visible;
  };
}
//display(id) is the function to call the API to get the information shown on the cards

Code for the map component:

world-map.component.svg

<path //path details
id="us" (mouseenter) = "cardShow('us')" (mouseleave) = "cardHide()"/>

world-map.component.ts

import { Component, OnInit } from '@angular/core';
import { CountryInfoComponent } from '../../info/country-info/country-info.component';

@Component({
  selector: 'app-world-map',
  templateUrl: './world-map.component.svg',
  styleUrls: ['./world-map.component.css'],
  providers: [CountryInfoComponent]
})
export class WorldMapComponent implements OnInit {
  constructor(public info: CountryInfoComponent) {}

  ngOnInit() {};
  public cardShow(id) {
    this.info.cardShow(id); //Function call to get API information to show on card
    this.info.visible = true;
  };
  public cardHide() {
    this.info.visible = false;
  }
}

Screenshots

Any help is greatly appreciated.