I have a lightning component that displays a modal when a button is clicked. Based on the ID stored in the dataset of the clicked element when the modal is loaded the action should look for a div that contains the ID and set it to display block. But I'm running into an issue where when I look for the div it should unhide it returns null.

component:
```
<aura:component controller="DataDictionaryController" implements="flexipage:availableForAllPageTypes" access="global" >
    
    <aura:attribute name="dataFields" type="Data_Field__c[]" />
    <aura:attribute name="dataObjectId" type="String" />
    <aura:attribute name="isModalOpen" type="boolean" default="false"/>
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th></th>
                        <th>Label</th>
                        <th>API Name</th>
                        <th>Data Type</th>
                        <th>Owner</th>
      					<th>Description</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Label</th>
                        <th>API Name</th>
                        <th>Data Type</th>
                        <th>Owner</th>
      					<th>Description</th>
                    </tr>
                </tfoot>
                <tbody>
                    
                <aura:iteration items="{!v.dataFields}" var="item">
                    <tr>
                        <td>
                            <div onclick="{!c.openModal}" data-id="{!item.Id}" class="hello">
                            	<lightning:button variant="brand" label="Info" title="Info" />
                            </div>
                        </td>
                    	<td>{!item.Label__c}</td>
                    	<td>{!item.Name}</td>
                    	<td>{!item.Data_Type__c}</td>
                    	<td>{!item.Business_Owner_ID__c}</td>
                    	<td>{!item.Description__c}</td>
                    </tr>    
                </aura:iteration>
                    
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="slds-m-around_xx-large">
        <aura:if isTrue="{!v.isModalOpen}">
            <section id="dataFieldModal" role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <header class="slds-modal__header">
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Field Details</h2>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <aura:iteration items="{!v.dataFields}" var="item">
                            <div aura:id="modal" data-id="{!item.Id}" style="display: none" >
                                <p>
                                	Info goes here...<br />
                                    {!item.Id}<br />
                                    {!item.Name}
                                </p>
                            </div>
                        </aura:iteration>
                    </div>
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral" label="Close" title="Close" onclick="{! c.closeModel }"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
    </div>    
    
</aura:component>
```

controller
```
({
	doInit : function(component, event, helper) {
        var pathname = window.location.pathname;
        var pathArray = pathname.split("/");
        var sfObject = "";
        var isLightningApp = true;
        if (pathArray[1] == 'lightning') {
            sfObject = pathArray[3];
            isLightningApp = false;
        }
        
        if (isLightningApp) {
            var dataObjectId = component.get("v.dataObjectId");
            var action = component.get("c.getDataFields");       
            action.setParams({ recordId : dataObjectId });
            action.setCallback(this, function(data){
                component.set("v.dataFields",data.getReturnValue());
            });
        } else {
            var action = component.get("c.getDataFieldsByObjectName");
            action.setParams({ name : sfObject });
            action.setCallback(this, function(data) {
                component.set("v.dataFields",data.getReturnValue());
            });
        }
        $A.enqueueAction(action);

	},
    
    
    openModal: function(component, event, helper) {
      let modals = component.find("modal");
      let desiredModal = modals.find(
        (modal) => modal.getElement().dataset.id === event.target.dataset.id
      );
      console.log(desiredModal);
      desiredModal.getElement().style.display = 'block';
    },
    
   closeModel: function(component, event, helper) {
       // Set isModalOpen attribute to false
       console.log('closeModal');
       component.set("v.isModalOpen", false);
   },


})
```

The Component Error I get is: Cannot read properties of null (reading 'style').

Any help would be much appreciated!!