React-leaflet: How to pass dynamic HTML/jsx/react component inside bindPopup?

Question

I want to pass a react component or jsx code to the bindPopup function but it accepts string as input. I tried using ReactDOMServer.renderToString as shown below but the popup is not dynamic. I want an onClick event to be registered inside the PopupTemplate component. Is there any better alternative:

Code:

layer.bindPopup(
            ReactDOMServer.renderToString(
                <PopupTemplate
                    layerId={layerId}
                />
            )
        );

Behaviour:

I can't use the Popup component here as the layer is a drawn polygon using react leaflet draw.