Same item is being rendered despite of different query string in React ( Next.js )

Please, first look at my code.

I made this up to present my code clearly. There might be some misspell. please be understandable!

//parent component

<Component nickname={nickname} />

//child component

//nickname is a prop of dynamic routing.

const test = ({nickname}) => {


const [number, setNumber] = useState('');
const [array, setArray] = useState([]);

const getNumber = () => {
 const url = '/api/number';
 const data = {
     nickname = nickname
  }
 axios.post(url, data)
 .then((res) => {
    setNumber(res.NUMBER)
 })
};

useEffect(() => {
  getNumber()
}, [nickname]) //when nickname (dynamic routing url) changes, the statement executes.

const getItem = async () => {
  const url = '/api/get';
  const data = {
     id : number
  };
  await axios.get(url, data)
  .then((res) => {
     setArray([...array, res])
  })
};

useEffect(() => {
  getItem()
}, [])

return (

<>
<div>
  {
   array.map((arr) => (
      {arr.name}
   ))
  }
</div>

</>

)
}

From this code, I’m having trouble getting different items.

Whenever I enter a different URL, array should be changed as I give different number in

const getItem = async () => {
  const url = '/api/get';
  const data = {
     id : number
  };
  await axios.get(url, data)
  .then((res) => {
     setArray([...array, res])
  })
};

here.

But seems there is no change even I enter a different URL.

However, when I directly edit the number state, It changes appropriately.

I don’t know what is going on, and looking for some wisdom.