ReactJS: How to use useState in a subcomponent of the page?

Question

I'm trying to use useState in the form but I get the following error:

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Here is the code of the comopnent:

import React, {useState} from "react";

import {
  Container,
  FormWrap,
  Icon,
  FormContent,
  Form,
  FormH1,
  FormLabel,
  FormInput,
  FormButton
} from "./SignupElements";

const SignUp = () => {

  const [email, setEmail] = useState('');
  const [username, setUsername] = useState('');
  const [name, setName] = useState('');
  const [firstSurname, setFirstSurname] = useState('');
  const [secondSurname, setSecondSurname] = useState('');
  const [password, setPassword] = useState('');

  return (
    <>
      <Container>
        <FormWrap>
          <Icon to="/">App</Icon>
          <FormContent>
            <Form action="#">
              <FormH1>Sign up</FormH1>
              <FormLabel htmlFor="for">Email</FormLabel>
              <FormInput onChange={(e) => setEmail(e.target.value)} type="email" required />
              <FormLabel htmlFor="for">Username</FormLabel>
              <FormInput onChange={(e) => setUsername(e.target.value)} type="text" required />
              <FormLabel htmlFor="for">Name</FormLabel>
              <FormInput onChange={(e) => setName(e.target.value)} type="text" required />
              <FormLabel htmlFor="for">First Surname</FormLabel>
              <FormInput onChange={(e) => setFirstSurname(e.target.value)} type="text" required />
              <FormLabel htmlFor="for">Second Surname</FormLabel>
              <FormInput onChange={(e) => setSecondSurname(e.target.value)} type="text" />
              <FormLabel htmlFor="for">Password</FormLabel>
              <FormInput onChange={(e) => setPassword(e.target.value)} type="password" required />
              <FormButton type="submit">Sign Up</FormButton>
            </Form>
          </FormContent>
        </FormWrap>
      </Container>
    </>
  );
};

export default SignUp;

The react app has different pages (until now the index and the sing-up), maybe it's relevant information, but I don't know how to fix it.

If anyone know how to fix it I will be very gratefull to listen your answer.