I'm working on a Reactjs WEB APP that hosts a meeting and creates a sharable link to join the meeting. Link is created like that: https://some_domain_name/screen_Share/8MoLgQnPjFcE-7v_bo967rIAueJ7Lv1zpIkxDtjJOMM

It is working fine on localhost, but at Production, it is giving an error in console with a blank page:

Error Image after clicking on the Meeting Link

Component Route is :

<Route exact path="/screen_Share/:id" component={screen_Share}/>

At Deployement, the Web.config file is:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Meetup" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

I have tried many things but no luck maybe I have to add some rules in Web.config file at deployment. Please guide me on how to resolve this issue.