Why am i getting this error “react Invalid hook call. Hooks can only be called inside of the body of a function component” in the following code?

import React,{ useEffect, useState} from 'react';
import { useLocation } from 'react-router-dom';
import ReactPlayer from 'react-player';

import { useResultContext } from '../contexts/ResultContextProvider';
import { Loading } from './Loading';

export const Results = () => {
  const {getResults, results, isLoading, searchTerm} = useResultContext();
  const location = useLocation();
  const [num, setNum] = useState(10);

  const changeNum=()=>{
    setNum(num+10);
    console.log(num)
    Results();
}

  useEffect(()=>{
    if(searchTerm){
    if (location.pathname ==='/videos') {
      getResults(`/search/q=${searchTerm} videos&num=${num}`)
    }else{
      getResults(`${location.pathname}/q=${searchTerm}&num=${num}`)
    }
  }
  },[location.pathname, searchTerm, num, getResults]);


  if (isLoading) return <Loading/>;

  switch (location.pathname) {
    case '/search':
      return (<><div className='flex flex-wrap justify-between space-y-6 sm:px-56 overflow-hidden pb-4 '>
        {
          results?.results?.map(({link, title, description}, index)=>(
            <div key={index} className='md:w-3/5 w-full'>
              <a href={link} target="_blank" rel="noreferrer">
                <p className='text-sm text-green-700'>
                  {link.length>50? link.substring(0,50): link}
                </p>
                <p className='text-lg hover:underline dark:text-blue-300 text-blue-700'>
                  {title}
                </p>
              </a>
              {description.length>15?
                <p>
                  {description}
                </p>:''}
            </div>
          ))
        }
      </div>
      <div onClick={changeNum} className='absolute bg-gray-200 border border-gray-400 py-3 px-10 rounded-full -mt-5 left-96 cursor-pointer active:bg-gray-300 dark:bg-gray-700 '>
        More Results
      </div>
      </>)
    case '/images':
      return (<>
      <div className='flex flex-wrap justify-center items-center '>
          {results?.image_results?.map(({image, link}, index)=>(
          <a className='sm:p-3 p-5' href={link.href} key={index} target='_blank' rel='noreferrer'>
                <img className='w-64' src={image.src} alt={link.title} loading='lazy' />
                <p className=' w-full break-words text-sm mt-2'>
                  {link.title.substring(0,40)}
                </p>
              </a>))}
        </div>
        <div onClick={changeNum} className='absolute bg-gray-200 border border-gray-400 py-3 px-10 rounded-full -mt-5 left-96 cursor-pointer active:bg-gray-300 dark:bg-gray-700 '>
        More Results
      </div>
        </>);
    case '/videos':
      return (
        <div className='flex flex-wrap justify-center'>
          {results?.results?.map(({additional_links}, index)=>(
            <div key={index} className='m-2'>
              {additional_links?.[0]?.href && <ReactPlayer url={additional_links?.[0]?.href} config={{ youtube: { playerVars: { origin: 'https://www.youtube.com' }}}} controls width='355px' height='200px'/>}
            </div>
          ))}
        </div>
      );
    case '/news':
      return (<div className='flex flex-wrap justify-between space-y-6 sm:px-56 overflow-hidden '>
      {
        results?.entries?.map(({link,id, title})=>(
          <div key={id} className='md:w-3/5 w-full'>
            <a href={link} target="_blank" rel="noreferrer" className='hover:text-underline'>
              <p className='text-sm text-green-700'>
                {link.length>40? link.substring(0,40): link}
              </p>
              <p className='text-lg hover:underline dark:text-blue-300 text-blue-700'>
                {title}
              </p>
            </a>
          </div>
        ))
      }
    </div>);
    default: return 'ERROR';
  }
  
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>