React component name must start with capital letter when using hooks

Question

I'm trying to build my web-site with React. I've learned that it's a good practice to name functional components starting with a capital letter, but presentational components name should start with a lowercase letter. I try to follow this rule, but when I import any hook to presentational component named starting with lowercase, React says "Failed to compile". Here is the message Line 10:26: React Hook "useContext" is called in function "newCoring" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks I know that renaming component will help, but still wonder why it's "a good practice" to name presentational components this way when it does not work with React hooks? Here is my component:

    import React, {useContext} from 'react'
    import InputComponent from '../Interface Components/InputComponent'
    import SelectComponent from '../Interface Components/SelectComponent'
    import AddToCart from '../Interface Components/AddToCart'
    import DrawButton from '../Interface Components/DrawButton'
    import Signs from '../Interface Components/Signs'
    import Cog from '../Interface Components/Cog'
    import InputContext from '../../context/input-context'
    const newCoring = () => {
        const inputContext = useContext(InputContext);
        return (
        <div className="first-line"> 
            <Signs/>
            <InputComponent id="width" default="500">Width:</InputComponent>
            <InputComponent id="height" default="500">Height:</InputComponent>
            <InputComponent id="depth" default="250">Depth:</InputComponent>
            <SelectComponent id="diameter" default="152" values={inputContext.diameters}>Diameter:</SelectComponent>}
            <Cog/>
            <AddToCart/>
            <DrawButton/>
        </div>
        );
    }
    export default newCoring;

Answer 1

but presentational components name should start with a lowercase letter

They aren't, User-Defined Components Must Be Capitalized

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.