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 (

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(
          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.");
  }, []);
  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 (
        <Navbar />
        <h1>This is a test</h1>

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.