Hook error using Truffle React box (transforming the App.js from Class component to Functional component)

not an expert Solidity/React user here. I got Truffle React box and I am making a website. My example is very easy. I have this Nav element:

import React from 'react';
import Nav from './NavbarElements';

const Navbar = () => {
    return (
       <Nav>
  
       </Nav> 
    );
};

export default Navbar;

Which is defined here:

import styled from 'styled-components';

    export const Nav = styled.nav`
        background: #000;
    `;

Simple. Now, due to some hook errors in React, I decided to convert my App.js file. When you download this box, the App is a Class component. It means you cannot use hook inside it (as far as I know). So my next step was transform that Class component into a Functional component (some users from the React community helped me in this task). The result was:

function App() {
  const [state, setState] = useState({ storageValue: 0, web3: null, accounts: null, contract: null });

  useEffect(() => {    
    async function init() {
      try {
        const web3 = await getWeb3();
        const accounts = await web3.eth.getAccounts();
        
        const networkId = await web3.eth.net.getId();
        const deployedNetwork = SimpleStorageContract.networks[networkId];
        const instance = new web3.eth.Contract(
          SimpleStorageContract.abi,
          deployedNetwork && deployedNetwork.address
        );
        
        instance.options.address = "0xA65990EC0CA555d2eCDD1d84E9D1397CFA967E60"
        
        setState(value => ({ ...value, web3, accounts, contract: instance }));
      } catch (error) {
        alert("Failed to load web3, accounts, or contract. Check console for details.");
        console.error(error);
      }
    }
    init();
  }, []);
  
  useEffect(() => {
    async function runExample (accounts, contract) {

      await contract.methods.set(25).send({ from: accounts[0] });
      const response = await contract.methods.get().call();
    
      setState(value => ({ ...value, storageValue: response }));
    };
    if(state.accounts != null && state.contract != null) {
      runExample(state.accounts, state.contract);
    }
  }, [state.accounts, state.contract]);
  
    if (!state.web3) {
      return <div>Loading Web3, accounts, and contract...</div>;
    }
    return (
      <div>
        <Navbar />
        <h1>This is a test</h1>
      </div>
    );
}

export default App;

The code was reviewed and seems to be fine. I cannot find any errors in it either. But it is again throwing a hook error, but some users think this could be a red herring because as far as I know I am not using any hook. If I remove <Navbar /> tag at the end of the App.js file, the app works perfectly.

I can provide a sandbox with my project if it’s necessary. Please, this is driving me crazy.