Teams configurable tab disable remove button

this is the link
https://docs.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/create-tab-pages/removal-page

import * as microsoftTeams from "@microsoft/teams-js";
import { initializeIcons } from "@fluentui/react";
import { Provider, Button, Segment, teamsTheme } from "@fluentui/react-northstar";
import React, { useEffect, useState } from 'react';
import { useTeams } from "msteams-react-base-component";

initializeIcons();

const Remove = () => {

const [{ context }] = useTeams({});
const[remove,setRemove]=useState(false);

useEffect(() => {
if (context) {
if(context.frameContext==="remove"){
setRemove(true);
microsoftTeams.settings.setValidityState(false);
microsoftTeams.settings.registerOnRemoveHandler((removeEvent) => {
microsoftTeams.settings.getSettings((settings) => {
settings.contentUrl = "https://localhost:8080/#/channel"
});
removeEvent.notifySuccess();
});
}
}
}, [context]);

return (
<Provider theme={teamsTheme}>
{remove && <>
<Segment content={
<>
<h3>Are You Sure, You Want To Remove The Tab</h3>
<h3>Click on Continue to Remove</h3>
<Button content="Continue" style={{ marginTop:"5%" ,marginLeft: "360px" }} primary onClick={()=>{microsoftTeams.settings.setValidityState(true)}}/>
</>}/>
</>}
</Provider>
)
}
export default Remove;


the Remove button gets enabled after few seconds. even when i dont click on the button