How to fix a contaminated state?

Question

Well, I'm back again, With another problem, Yay!

This problem is more thinking than coding, But I will include a small part of the code that might be related.

What's the problem?
imaging having a website like 'MALTEGO' that takes an excel file and shows connection, Now imaging entering a bad file, that doesn't supposed to work, What will happen? An error, And then u can Retry and enter another file.

But!
Because There is a 'useState' involved, when you go back, the 'useState' dost reset, it stays contaminated and now you have problems in the code.

Now my question is this, How can I clear the state, Upon entry to a component?

A Bit of the code:

  const [fileData, setFileData] = useState<any>();

const handleFileData = (data: Array<any>) => {
          setFileData(data);}

  const isData = () => {
    if (fileData !== undefined) { return <MainPage Data={fileData}></MainPage> }
    else { return (HOMEPAGEerrorversion) }
  };
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={HOMEPAGE}></Route>
        <Route path="/main" element={isData()}></Route>
      </Routes>
    </BrowserRouter>
  );

Ps. In the 'homepageErrorVersion' I have a modal from the Material UI that upon closing, it goes back to the first page, Known as HOMEPAGE.