Background: Hello, so I have multiple solidity contracts which are separated into a single file each. It has 1 base contract and the others are derived contracts like:

// BaseContract.sol
contract BaseContract {
...
}

// DerivedContract.sol
...
import "./BaseContract.sol";
contract DerivedContract is BaseContract{
...
}

I use ^0.8.0 version. I have compiled the contracts so I have a multiple .json file containing ABI and fucntions for each contract. I also use truffle react box, it has a getWeb3.js file (which is just a simple web3 init file)

Problem: Since my contracts are separated into multiple files, how can I instantiate the contract instance with web3? Should I only instantiate the BaseContract? or should I only instantiate the leaf contract (since it's a derived contract with all parent contracts' functionality)? Or should I instantiate each contract? Or maybe... should I repack every single contract file into a single file with only 1 contract?

And how can I achieve that? Below is my method to instantiate a single contract

...
import SimpleStorageContract from "./contracts/Storage.json";
...
componentDidMount = async () => {
    try {
      // Get network provider and web3 instance.
      const web3 = await getWeb3();

      // Use web3 to get the user's accounts.
      const accounts = await web3.eth.getAccounts();

      // Get the contract instance.
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = SimpleStorageContract.networks[networkId];
      const instance = new web3.eth.Contract(SimpleStorageContract.abi,deployedNetwork && deployedNetwork.address,);

      // Set web3, accounts, and contract to the state, and then proceed with an
      // example of interacting with the contract's methods.
      this.setState({ web3, accounts, contract: instance });
    } catch (error) {
      // Catch any errors for any of the above operations.
      alert(`Failed to load web3, accounts, or contract. Check console for details.`);
      console.error(error);
    }
  };