How to stop programmatic click stealig focus?

I'm wondering if it is possible to programatically click a button without stealing focus from another element.

My conundrum has roots in a real world problem.

1. I have third party carousel component that doesn't have an auto-play functionality, but I have implemented my own by utilising the next button present in the component, programmatically clicking it every 3 seconds to auto-scroll on a loop.
2. I also have a self-defined nav bar with expanding sections, such that when I hover the main nav section, another will drop down with more options - Pretty standard.

The issue I am finding is that when the nav bar has an expanded section showing by hovering a section, the next "click" performed by the carousel loader is cancelling the nav bar section - I assume by stealing the focus.

I'm wondering if there is a way to construct things such that my nav bar isn't dismissed.

The clicking is done something like this:

const NEXT_EL = '.carousel-btn-next';

setInterval(() => {
  const nextBtn = document.querySelector(NEXT_EL);
  nextButton.click();
}, 3000);

so it's pretty basic.

I have also attempted to use an actual click event such as:

const clickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window,
  });
  nextBtn.dispatchEvent(clickEvent);

But the same still occurs.