How can custom Hooks in React have different state names then the state name used by the functional component from which it was called?

Question

Firstly, Here is the working code:

#App.js

import React, { useState } from "react";

const useCounter = ({ initialState }) => {
  const [c