Highcharts Orthographic Map - Zooming and Panning without it resetting to default zoom setting

Question

currently I have a map of the globe and when I try panning on the map after zooming in on the countries, it resets the zoom to the default zoom. I am able to pan the globe but I cannot pan when I am zoomed in. It makes navigating a bit annoying. Here is my current code:

 Highcharts.getJSON(
  'https://code.highcharts.com/mapdata/custom/world.topo.json',
  topology => {
 
    const chart = Highcharts.mapChart('container', {
      chart: 
      {
        map: topology,
      },
 
      title: {
        text: ''
      },
 
      legend: {
         enabled: false,
         align: 'center',
         verticalAlign: 'bottom',
         itemStyle: {
             fontWeight: 'bold',
             fontSize: '20px'
         }
     },
 
      mapNavigation: {
        enabled: true,
        enableDoubleClickZoomTo: true,
        buttonOptions: {
          align: 'right',
          verticalAlign: 'bottom'
        }
      },
 
      mapView: {
        maxZoom: 30,
        projection: {
          name: 'Orthographic',
          rotation: [60, -30]
        }
      },
 
      colorAxis: {
                         min: 0,
                         max: 100,
                         text: '',
                         stops: [[0, 'darkgray', ''], [0, '#5ce1e6', '{{question['answer1']}}'], [0.49, '#c9f5f7', ''], [.50, '#aee0a0', ''], [.51, '#fff4c8', ''], [1, '#ffde59', '{{question['answer2']}}']],
                         title: {
                          text: '',
                          },
                     },
      credits: {
        enabled: false
      },

      tooltip: {
        borderColor: 'none',
        borderRadius: 10,
        useHTML: true,
        formatter: function(tooltip) {
            return `<b>${this.point.name}</b> <br> <div style="display: inline-block;" class="square-answer1-globe"></div>{{question["answer1"]}}: <b>${this.point.value1}</b>% <br> <div style="display: inline-block;" class="square-answer2-globe"></div>{{question["answer2"]}}: <b>${this.point.value2}</b> %`
        },
        backgroundColor: 'black',
        style: {
        color: 'white'
    },                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
     },


      plotOptions: {
        series: {
          animation: {
            duration: 750
            
          },
          clip: false
        }
      },
 
      mapline: {
  color: 'black' // change to the desired color
},
        series: [{ 
           name: 'Graticule',
           id: 'graticule',
           type: 'mapline',
           data: getGraticule(),
           nullColor: 'gray',
           color: 'black',
           
           accessibility: {
          enabled: false
        },
        enableMouseTracking: false
         },
        
      
      {
        data: data1,
        joinBy: 'name',
        borderWidth: 0.5, // Set the border width
        borderColor: 'black', // Set the border color
        name: '',
        states: {
          hover: {
             color: '', // set to same color as regular state
            borderColor: '#000000'
          }
        },
     
        accessibility: {
          exposeAsGroupOnly: true
        }
      }]
    });


    // Render a circle filled with a radial gradient behind the globe to
    // make it appear as the sea around the continents
    const renderSea = () => {
      let verb = 'animate';
      if (!chart.sea) {
        chart.sea = chart.renderer
          .circle()
          .attr({
            fill: {
              radialGradient: {
                cx: 0.4,
                cy: 0.4,
                r: 1
              },
              stops: [
                [0, 'white'],
                [0.5, 'white']
              ]
            },
            zIndex: -1
            
          })
          .add(chart.get('graticule').group);
        verb = 'attr';
      }
 
      const bounds = chart.get('graticule').bounds,
        p1 = chart.mapView.projectedUnitsToPixels({
          x: bounds.x1,
          y: bounds.y1
        }),
        p2 = chart.mapView.projectedUnitsToPixels({
          x: bounds.x2,
          y: bounds.y2
        });
      chart.sea[verb]({
        cx: (p1.x + p2.x) / 2,
        cy: (p1.y + p2.y) / 2,
        r: Math.min(p2.x - p1.x, p1.y - p2.y) / 2
      });
    };
    renderSea();
    Highcharts.addEvent(chart, 'redraw', renderSea);
 
  }
 );

I tried this:

chart: {
        type: 'orthographic',
        panning: true
    },
    mapNavigation: {
        enableMouseWheelZoom: true
    },

But it still zooms out when panning.

I tried this:

chart: {
    map: topology,
    events: {
      // Prevent resetting the zoom on map panning
      wheel: function (e) {
        e.preventDefault();
        var chart = this;
        setTimeout(function () {
          chart.pointer.zoomHorizontally = false;
        }, 1);
      }
    }
  },

But that doesnt do anything related to this either.