Sintaxe correta da função no React

Oi, criei uma função para abrir uma modal na minha pagina mas estou com dificuldade com a sintaxe correta então fica dando erro. Qual seria a forma correta?

import React, { Component } from "react";
import "./style.css"

class BookCard extends Component {
  render() {
    return (
      <section className="bookcard-item click-modal">

        { function openModal(modalID){
            const modal = document.getElementById(modalID);
            if(modal) {
              modal.classList.add('modal-bookcard-open');
              modal.addEventListener('click', (e) => {
                if(e.target.id == modalID || e.target.className == 'modal-btn-close') {
                  modal.classList.remove('modal-bookcard-open');
                }
            });
           }
          }          
          const clickModal = document.querySelector('.click-modal');
          clickModal.addEventListener('click', () => openModal('modal-bookcard'));}

        <a href="https://www.youtube.com" target="_blank" rel="noreferrer">
          <img src="{BlackBook}" alt="LIVRO 1" />
        </a>
        <p>Livro 1</p>
        <p>Media %%</p>
      </section>
    );
  }
}

export default BookCard;