JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Modal Test</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

	<style>
		.show {
			 transition: opacity 100ms; 
		}
		.hide {
			 transition: opacity 10ms; 
		}
	</style>

</head>
<body>

	<p>
		Click a button and quickly try to cancel the modal by clicking the backdrop.
	</p>

	<!-- Buttons -->
	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 1">
		Item # 1
	</button>

	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 2">
		Item # 2
	</button>

	<button type="button" class="btn btn-primary item-button" data-item-info="You clicked # 3">
		Item # 3
	</button>

	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					...
				</div>
			</div>
		</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<script>
		var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
			keyboard: false
		})

		$('.item-button').click(function(){
			$('#myModal').find('.modal-body').text($(this).data('item-info'))
			myModal.show();
		})

		$('.modal').click(function(e){
			if(!$(e.target).hasClass("modal-body")){
				console.log('Clicked modal backdrop, calling .hide()...')
				myModal.hide();
			}
		})

	</script>

</body>
</html>