Add Custom footer to add one button

I have one component called Tour.js which is overall rendering tour of the application.

Now I have 3 default buttons which are Next, Skip and Back (If I am not on first popup tour). I want to add one button in footer with title Don’t show again. By clicking on that I want to call function.

<>
  <Joyride
    callback={this.handleJoyrideCallback}
    continuous={true}
    run={run}
    disableOverlayClose={true}
    showProgress={true}
    showSkipButton={true}
    scrollOffset={50}
    steps={[...listItemstemp, ...listItems]}
    styles={{
      options: {
        zIndex: 9999
      }
    }}
  />
</>

and my list items are

let listItemstemp = [
  {
    content: <div className="gcontrol-ture">
      <img src={one} />
      <div className="gcontrol-ture-inner">
        <h1>
          {t("t_tour.t_common.t_welcome.t_heading")}
          <strong>{t("t_tour.t_common.t_welcome.t_heading1")}</strong>
        </h1>
        <p>{t("t_tour.t_common.t_welcome.t_content")} </p>
        <p>{t("t_tour.t_common.t_welcome.t_content1")} </p>
      </div>
    </div>,
    locale: {
      skip: <strong aria-label="skip">{t("t_tour.t_common.t_skip")}</strong>,
      next: <strong aria-label="skip">{t("t_tour.t_common.t_next")}</strong>,
      back: <strong aria-label="skip">{t("t_tour.t_common.t_back")}</strong>,
    },
    placement: "center",
    target: "body",
    disableBeacon: true,
    styles: {
      options: {
        width: 650,
        padding: "0px"
      }
    }
  }
]