My page.tsx file is importing another tsx file.
I would like to use state management via React.useState() in this file, but it seems that file is being considered a "Server Component".
So if I put "use client"; at the top of the file, I get the error Module not found: Can't resolve 'fs'.
Why can't I set this child component as a Client Component via NextJS, and is there any way around this so that I can use states properly?

Sample:

"use client";
import React from 'react';
import HomePage from "./home";

export default function BasePage() {
  function changePage(page:string) {
    switch(page) {
      case 'Home': setPage(<HomePage changePage={changePage} />);
      default: setPage(<HomePage changePage={changePage} />);
    }
  }

  const [page, setPage] = React.useState(<HomePage changePage={changePage} />);
  return page;
}

If I try to import { useState } from 'react'; I get an ecma script error, so that didn't work either.