title: OnClick event results differently in form and image
body: <p>I have a <code>navbar component</code> with a <code>search bar</code> and the <code>main page component</code>. When an npm package name is inputted in the search bar it should render the main page component with the details of the package using <code>api.npms.io</code>.</p>
  <p><strong>App.jsx</strong></p>
  <pre><code>function App() {
    const [input, setInput] = useState('react');
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Navbar setInput={setInput} /&gt;
        &lt;div className=&quot;sections&quot;&gt;
          &lt;Main input={input} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>navbar</strong></p>
  <pre><code>function Navbar({ setInput }) {
    const inputRef = useRef();
  
    const submitHandler = () =&gt; {
      setInput(inputRef.current.value);
      inputRef.current.value = '';
    };
  
    return (
      &lt;div className=&quot;Navbar&quot; id=&quot;Navbar&quot;&gt;
        &lt;div className=&quot;logo&quot;&gt;
          &lt;img src={logo} alt=&quot;logo&quot; /&gt;
        &lt;/div&gt;
        &lt;div className=&quot;line&quot;&gt;&lt;/div&gt;
        &lt;form onSubmit={submitHandler}&gt;
          &lt;div className=&quot;search&quot;&gt;
            &lt;img src={search} alt=&quot;search&quot; onClick={submitHandler} /&gt;
            &lt;input
              placeholder={'Search for a NPM package'}
              name=&quot;name&quot;
              type=&quot;text&quot;
              ref={inputRef}
              id=&quot;name&quot;            
            &gt;&lt;/input&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  }
  
  export default Navbar;
  </code></pre>
  <p><strong>Main.jsx</strong></p>
  <pre><code>function Main({ input }) {
    const [packageInfo, setPackageInfo] = useState(null);
    const [loading, setLoading] = useState(true);
  
    const fetchPackageInfo = async (input) =&gt; {
      const response = await fetch(`https://api.npms.io/v2/package/${input}`);
      const data = await response.json();
      setPackageInfo(data);
      setLoading(false);
    };
  
    useEffect(() =&gt; {
      fetchPackageInfo(input);
    }, [input]);
  
    return (
      &lt;div&gt;
        {loading ? (
          &lt;Loader /&gt;
        ) : (
          &lt;div className=&quot;Main&quot; id=&quot;Main&quot;&gt;
            &lt;div className=&quot;row&quot;&gt;
              &lt;Summary
                heading={packageInfo.collected.metadata.name}
                version={packageInfo.collected.metadata.version}
                description={packageInfo.collected.metadata.description}
                license={packageInfo.collected.metadata.license}
                npm={packageInfo.collected.metadata.links.npm}
                github={packageInfo.collected.metadata.links.homepage}
                downloads={Math.trunc(
                  packageInfo.evaluation.popularity.downloadsCount
                ).toLocaleString()}
                keywords={packageInfo.collected.metadata.keywords.join(', ')}
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default Main;
  </code></pre>
  <p>When I input the value in the search bar and then click on the image or the search icon, it gives me the expected output which is to render the details of the package but while the data is being fetched from the API it does not show the loader.
  The next problem is when I submit the inputted value it renders the details of the default package which is <code>react</code> and not the package name entered in the search bar.</p>
  <p>Any help would be beneficial. Also, I am new to React and am not sure if I am managing state the right way.</p>