How can we change the clipPath height using any props

[aliabbas-2012]

Hello I am not able to change the height of clipPath and <rect x="0" y="0" width="1846" height="15"></rect> Because my top navbar is fixed every time the first step overlaps navbar

My code is

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';
import { useLocalStorage } from 'react-use';
import { useTranslate } from '@hooks';
import { getTourSteps } from '@data';
import Loadable from 'react-loadable';

const Component = Loadable({
  loader: () => import('reactour'),
  loading: () => null,
});

const Tour = ({ isOpen, onToggle }) => {
  const { tHtml } = useTranslate('common');
  const router = useRouter();
  const [key, steps] = getTourSteps(router.pathname, tHtml);
  const [value, setValue] = useLocalStorage(`tour-${key}`, 'false');

  const doNothing = () => {};

  const disableBody = () => {
    document.body.classList.add('tour-on');
  };

  const handleClose = () => {
    document.body.classList.remove('tour-on');
    onToggle();
    setValue('true');
  };

  useEffect(() => {
    if (!isOpen && value === 'false') onToggle();
  }, [value, onToggle, isOpen]);

  return (
    !!steps &&
    isOpen && (
      <Component
        closeWithMask={false}
        disableInteraction
        rounded={4}
        steps={steps}
        isOpen={isOpen}
        onRequestClose={handleClose}
        onClickMask={doNothing}
        onClickHighlighted={doNothing}
        onAfterOpen={disableBody}
        padding={{ 
          mask: 10, 
          popover: [5, 10], 
          wrapper: [10,50,0,0] 
        }}
      />
    )
  );
};

export default Tour;

I provided the padding but its not working