Multiple react hooks not working properly

    import React from 'react';
    import axios from 'axios';
    import { useEffect, useState } from 'react';
    import { useLocation, Link, useNavigate } from 'react-router-dom';
    
    function App() {
    
      const temp = useLocation();
      const [username, changeUsername] = useState("guest")
      const [password, changePassword] = useState("guest")
      const [id, changeId] = useState(-1)
      const [data,changeData]=useState(null);
    
      useEffect(() => {
        if (temp.state !== null) {
          changeUsername(temp.state.username);
          changePassword(temp.state.password);
          changeId(temp.state.id)
        }
      },[])
    
       useEffect(() => {
         if (id !== -1) {
            //fetchdata with axios
         changeData(fetchedData)
       }
      },[id])
    
      return (
        <div>
          {data!==null && data.map(a => (DataComponent(a))}
        </div>
      );
    }
    
    export default App;

DataComponent also uses react hooks... When I try this with some local data it works, but with fetched data I get "Rendered more hooks than during the previous render".