Unable to catch and log the error from axios request

I'm validating user input and result in express and am returning 422 if the input is invalid and a 400 if result is empty. The problem is that I can't log the response object when an error occurs.

Nodejs:

 if (q === '' || q.length < 3 || q.length > 150) {
    console.log('invalid query');
    return res.sendStatus(422).send('Search not found');
  } else {
    try {
      // Fetch redis data
      const data = await GET_ASYNC('data');
       
      // stuff here

      // Result Validation
      if (!Array.isArray(data) || !data.length) {
        res.status(400).send('Search not found');
      } else {
        // do stuff
        res.status(200).send(data);
      }
    } catch (err) {
      console.error(err);
      res.sendStatus(500); // Server error
    }

Now my react code:

const searchDb = useCallback(async() => {
        const CancelToken = axios.CancelToken;
        const source = CancelToken.source();
        
        try {      
            axios.get(`/api/bestProduct?q=${searchValue}`, 
            { cancelToken: source.token })
            .then(res => {
                console.log(res) // nothing shows up

                const data = res.data;
                setData(data)          
            });
        } catch (err) {
            if (axios.isCancel(err)) {
                console.log(err.response); // nothing shows up
            } else {
                console.log('hello??') // nothing
                return setError(`There's been a problem on our end.`)
            }
        }
    }, [])

I've looked at other solution and tried to log the res and res.status but nothing shows up. This is what my console looks like during the error:

enter image description here