Edge labels are overlapping in vis js hierarchical layout. Is there a solution (even a hacky solution)?

Question

I was trying to create a hierarchical layout graph in Vis JS, these are my options -

const hierarchyOption: Options = useMemo(
    () => ({
      autoResize: true,
      nodes: {
        shape: 'circle',
        shapeProperties: {
          interpolation: false,
        },
        scaling: {
          min: 10,
          max: 15,
          label: {
            enabled: true,
            min: 8,
            max: 30,
            drawThreshold: 1,
            maxVisible: 20,
          },
        },
        font: {
          size: 48,
          face: 'Courier New',
          color: 'black',
        },
      },
      edges: {
        width: 10,
        color: { color: themeState === 'dark' ? '#FFB900' : '#355dcc', inherit: 'from' },
        font: {
          size: 130,
          face: 'Courier New',
          color: themeState === 'dark' ? '#FFB900' : '#355dcc',
          strokeWidth: 0,
        },
        physics: false,
      },
      physics: {
        enabled: true,
        barnesHut: {
          theta: 0.5,
          gravitationalConstant: -20000,
          centralGravity: 0.3,
          springLength: 95,
          springConstant: 0.04,
          damping: 0.09,
          avoidOverlap: 1,
        },
      },
      interaction: {
        tooltipDelay: 200,
        hideEdgesOnDrag: false,
        hideEdgesOnZoom: false,
        zoomView: true,
        dragView: true,
        hover: true,
        hoverConnectedEdges: true,
        selectConnectedEdges: true,
        navigationButtons: false,
      },
      height: '100%',
      width: '100%',
      layout: {
        improvedLayout: false,
        hierarchical: {
          enabled: true,
          levelSeparation: 3050,
          nodeSpacing: 2000,
          treeSpacing: 3000,
          blockShifting: true,
          edgeMinimization: true,
          parentCentralization: true,
          direction: 'LR', // UD, DU, LR, RL
          sortMethod: 'directed', // hubsize, directed
          shakeTowards: 'leaves', // roots, leaves
        },
      },
    }),
    [themeState]
  );

This is the way I want it but the edges labels are overlapping, is there a way to show them properly without making too much design changes?

Here is an example of the edge labels overlapping:

And a closer look:

I tried changing the offset but it didn't work.