This is the simple logic. Your ShowOffer component is not identify the onclick event and this component's button is not have any event handlers. So you just pass the event or directly pass the function name for access the event. Passing props name is the important one.

<ShowOffer display={"block"} onClick = {toggleBox}/>
export default function ShowOffer({ display, onClick}) {
  return (
    <button style={{ display: `${display}` }} className="show-offer" onClick={onClick}>
      Show Offer
    </button>
  );
}

or

<ShowOffer display={"block"} toggleBoxFunct = {toggleBox}/>
    export default function ShowOffer({ display, toggleBoxFunct }) {
      return (
        <button style={{ display: `${display}` }} className="show-offer" onClick={toggleBoxFunct}>
          Show Offer
        </button>
      );
    }

You are adding onClick on the ShowOffer component, but here you are just passing it as a prop in it.

<ShowOffer display={"block"} onClick={toggleVisibility} />

is same as

React.createElement(ShowOffer, {
  display: "block",
  onClick: toggleVisibility
});

Under the hook, you are just passing an argument to a function

You have to add onClick event on the button in ShowOffer component as:

Live Demo

<button
      style={{ display: `${display}` }}
      onClick={toggleVisibility}
      className="show-offer"
    >
      Show Offer
    </button>

and you have to pass the toggleVisibility callback to ShowOffer as:

<ShowOffer display={"block"} toggleVisibility={toggleVisibility} />

You can use concept of Callbacks,
App.js, make following changes,
pass toggleVisibility={toggleVisibility} as props, no need to mention onClick at component but at button

  return (
    <div className="App">
      <Modal display={modalVisible ? "flex" : "none"} />
      <ShowOffer display={"block"} onClick={toggleVisibility} toggleVisibility={toggleVisibility}/>
      <button onClick={toggleVisibility}>Button</button>
    </div>
  );

ShowOffer.js, props passed function, call that function here with onclick,

import React from "react";
import "./ShowOffer.css";

export default function ShowOffer({ display, toggleVisibility }) {
  return (
    <button style={{ display: `${display}` }} onClick={toggleVisibility} className="show-offer">
      Show Offer
    </button>
  );
}

working solution is here, https://codesandbox.io/embed/modal-overlay-tnis9?fontsize=14&hidenavigation=1&theme=dark