I need to get an element, the element in question is using a css module. The problem that after rendering its id changes, so document.getElementById("modal") returns me null

import React from "react";

export const HandleClick = (event: React.MouseEvent<HTMLDivElement>) => {
    event.preventDefault();
    console.log(document.getElementById("modal"))
}

import React, { FC, useEffect, useState } from 'react'
import { HourContent } from '../../../utils/types';
import style from "./index.module.scss";
import { TbList, TbCalendar } from "react-icons/tb"


type Props = {
    HourContent: HourContent;
}

const MoreDettailsClass: FC<Props> = ({ HourContent }) => {

    return (
        <div id={style.modal} className="open">
            <div className={style.container}>
                <div className={style.emoji}>