JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<p>Dialog set to autoOpen:false with open in click event and overlay click works as expected with .on</p>
<div id="your-dialog-id">Your modal dialog</div>
<p><a href="#" id="open">Open dialog</a></p>

JavaScript

$("#open").click(function(){
    $("#your-dialog-id").dialog("open");
});

$("#your-dialog-id").dialog({autoOpen:false,modal: true});

$("body").on("click",".ui-widget-overlay",function() {
     $('#your-dialog-id').dialog( "close" );
});