Headers on GET request with SWR

Question

Good morning guys. I would like to know how I can pass headers on a GET request with the SWR. My need lies where I need to show all the registered products of a company, where the ID of this is placed in localstorage as soon as the login is done. I need to pass this ID through an Authorization Headers to the backend, with this I can make the query and bring the products of the same.

useFetch.js:

import useSWR from 'swr'
import axios from 'axios';

export function useFetch(url, headerValue) {
  const { data, error, mutate } = useSWR(url, async url => {
    const response = await axios.get(url, {
      headers: {headerValue}
    });

    return response.data;
  }, {
    refreshInterval: 1000,
    refreshWhenHidden: true
  })

  return { data, error, mutate }
}

Profilejuridica.js:

import React, { useState } from 'react';
import { useHistory, Link } from 'react-router-dom';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.min.css'; 
import { FiPower } from 'react-icons/fi';

import './styles.css';

export default function ProfileJuridica() {
  const history = useHistory(); 

  const idPessoa = localStorage.getItem('idPessoa');
  const nomerazao = localStorage.getItem('nomerazao');

  function handleLogout() {
    localStorage.clear();
    history.push('/');
  }

  return(
    <div>
      <h1>Bem vindo(a) {}</h1>

      <button type="button" onClick={handleLogout}>
        <FiPower size={18} color="#E02041" />
      </button>


      <Link to="/allproducts">Produtos cadastrados</Link> <br/>
      <Link to="/products/new">Cadastrar novos produtos</Link>
      
      <ToastContainer />
    </div>
  )
}

Products.js:

import React from 'react';
import { useHistory, Link } from 'react-router-dom';
import useSWR from 'swr'
import { useFetch } from '../../hooks/useFetch';
import { FiPower } from 'react-icons/fi';

export default function Products() {

  const history = useHistory(); 

  const idPessoa = localStorage.getItem('idPessoa');

  const { data, error } = useFetch('products/all', idPessoa);

  console.log(data);

  console.log(error);


  if(!data) {
    return <p>Carregando...</p>
  }

  if(error) {
  return <p>Erro ao carregar produtos {error}</p>
  }
  

  function handleLogout() {
    localStorage.clear();
    history.push('/');
  }

  return(
    <div>
      <h1>Produtos</h1>

      <button type="button" onClick={handleLogout}>
        <FiPower size={18} color="#E02041" />
      </button>
    </div>
  )
}

Productcontroller.js:

const knexPg = require('../database/postgres');

module.exports = {
  async allProducts(req, res) {   
    const idPessoa = req.headers.authorization;
    
    return res.json(
      await knexPg('produtos')
            .where('id_pessoa', idPessoa)
            .select('*')
            .orderBy('nome_produto')
    );
  },
 }

Routes.js - Backend:

const express = require('express');

const PessoaController = require('./controllers/PessoaController');
const ProductController = require('./controllers/ProductController');

const routes = express.Router();

routes.get('/products/all', ProductController.allProducts);

routes.post('/pessoa/register', PessoaController.registro);
routes.post('/pessoa/login', PessoaController.login);
routes.post('/products/new', ProductController.newProducts);

module.exports = routes;

NOTE: I tried to configure useFetch in several ways, none of which worked. Always returns an error in the console.log of Object() is not a Function.