Prevent onClick (using ENTER) on a button after overlay shown

I have a button and when I click, its shown an overlay with width 100%, height 100% and position: absolute.
The problem is that, after I click the button to show the overlay, I can press enter and the overlay will show again (2x times).

I need to prevent this. I have already z-index set and is still happening.

I want also to say, an overlay can be also be shown without being clicked (I have some custom functions/timers) and also there can be more than an overlay, but I don't want the user to be able to create another one when he is pressing enter after showing the overlay at the same button (or navigate through buttons/button focus).

I'm using Reactjs, this is the full code: https://codesandbox.io/s/pensive-phoebe-74jtej

Dashboard:

import React from "react";
import { useOverlay } from "./OverlayContext";

function Dashboard() {
  const { CreateOverlay } = useOverlay();

  function handleClick(e) {
    e.preventDefault();
    e.stopPropagation();
    CreateOverlay("Now press ENTER and it will trigger again.");
  }

  return (
    <>
      <div>Click the button!</div>
      <button onClick={(e) => handleClick(e)}> Show overlay </button>
    </>
  );
}

export default Dashboard;

Overlay context:

import { createContext, useContext, useState } from "react";

export const OverlayContext = createContext();

export function useOverlay() {
  return useContext(OverlayContext);
}

export const OverlayProvider = ({ children }) => {
  const [overlays, setOverlays] = useState([]);

  function CreateOverlay(text) {
    return setOverlays((o) => {
      return [...o, { text }];
    });
  }

  return (
    <OverlayContext.Provider value={{ CreateOverlay }}>
      {overlays.length > 0 &&
        overlays.map((o, index) => (
          <div className="overlay" key={index}>
            {o.text}
          </div>
        ))}
      {children}
    </OverlayContext.Provider>
  );
};

Pressing enter will trigger the button again, so you need to blur from the button after clicking.

function handleClick(e) {
    e.preventDefault();
    e.stopPropagation();
    CreateOverlay("Now press ENTER and it will trigger again.");
    e.target.blur();
  }

After some many testing and research, I've found that I can focus on a button that the overlays will have.

Solution:

I've just added a button inside the overlay and with a ref and then using useEffect I could make focus on that specific button which will make sense for the next user interaction which will be only on the items created inside overlay.

import { createContext, useContext, useState, useEffect, useRef } from "react";
export const OverlayContext = createContext();
export function useOverlay() {
return useContext(OverlayContext);
}
export const OverlayProvider = ({ children }) => {
const [overlays, setOverlays] = useState([]);
const buttonFocusRef = useRef(null);
function CreateOverlay(text) {
return setOverlays((o) => {
return [...o, { id: Math.random() * 100, text }];
});
}
function DeleteOverlay(id) {
setOverlays(overlays.filter((o) => o.id !== id));
return;
}
useEffect(() => {
console.log("[Debug] Overlays length:", overlays.length);
}, [overlays]);
useEffect(() => {
if (overlays.length > 0 && buttonFocusRef !== null) {
buttonFocusRef.current.focus();
}
}, [overlays, buttonFocusRef]);
return (
<OverlayContext.Provider value={{ CreateOverlay }}>
{overlays.length > 0 &&
overlays.map((o, index) => (
<div className="overlay" key={index}>
{o.text}
<button
className="btn"
onClick={() => DeleteOverlay(o.id)}
ref={buttonFocusRef}
>
Click to cancel overlay
</button>
</div>
))}
{children}
</OverlayContext.Provider>
);
};

Note:
In my first post I've did not have a button in the source code, so if you have to focus on a div for example, you can set the ref on that div and also you need to set tabindex="0" for the focus to work.