React js remove third party rendered html

Question

I have below code

<div id="parent">
<div id="dvWeather">
{
data && (
thirdparty.renderWeatherInfo(data,"dvWeather")
)
}
<div/>
</div>

What it does

<div id="parent">
<div id="dvWeather">
<div id="mtWeather">
other stuff
</div>
<div/>
</div>

So it is working when it data has value, but when I update the data with state to null, it renders but the content of dvWeather does not remove.

But when I do simply this

<div id="parent">
<div id="dvWeather">
{
data && (
<h2>Hello</h2>
) 
}
<div/>
</div>

I can see when data is not null h2 is rendering, if null then blank

Third party is using react react dom to render component in given div

I believe this because dvWeather has been rendered by different reactjs state, so in my project state unable to remove it

What could be the possible issue and work around it

Thanks

Answer 1

Maybe you can try this way

<div id="parent">
<div id="dvWeather">
{
data ? (
thirdparty.renderWeatherInfo(data,"dvWeather")
) : null
}
<div/>
</div>