If I understand the question correctly, the Woocommerce team came up with a really cool soultion a while back.
You can read a basic explenation here: https://developer.woo.com/2021/11/15/how-does-woocommerce-blocks-render-interactive-blocks-in-the-frontend/
The idea is you have to modify the usual WP block setup to include a frontend.js file that replaces the gutenberg block with your react file:
import Block from './block';
import {render, Suspense} from "@wordpress/element";
window.addEventListener('DOMContentLoaded', () => {
const customBlocks = document.querySelectorAll('.block-class-selector');
if (customBlocks.length) {
customBlocks.forEach(customBlock => {
const attributes = {...customBlock.dataset};
render(
<Suspense fallback={<div className="wp-block-placeholder"/>}>
<Block {...attributes} />
</Suspense>,
customBlock
);
})
}
});
Using PHP, you need to collect all of the blocks attributes/settings and output them as data sets inside the container div, this allows you to access them inside your react code as attributes. It's probably too much to explain here, but I suggest you download the Woocommerce plugin and take a look at their code. They have some great classes that do all of the heavy lifting.
I hope that helps at all.