title: React Joyride - arrow changes position back to center even though there is margin
body: <p>Like the title says I have an issue with React Joyride, I want to customize the tooltip without making a custom one, as I do not know how to do that, nor do I think I need a custom one. My issue is that when I set the margin of an arrow it moves back to center when I click next, or to be precise when I move to the next tooltip.
  Here's my code:</p>
  <pre><code>function Tour({ steps }) {
    const INITIAL_STATE = {
      steps: steps,
      key: new Date(),
      run: false,
      continuous: true,
      loading: false,
      stepIndex: 0,
    };
  
    const [tourState, dispatch] = useReducer(generalReducer, INITIAL_STATE);
    // this useEffect is currently temporary, probably will check if the user has entered for the first time on page where tour is needed
    useEffect(() =&gt; {
      if (!localStorage.getItem(&quot;tour&quot;)) {
        dispatch({ type: tour.START });
      }
    }, []);
  
    const callback = data =&gt; {
      const { action, index, type, status } = data;
      if (action === ACTIONS.CLOSE || (status === STATUS.SKIPPED &amp;&amp; tourState.run) || status === STATUS.FINISHED) {
        dispatch({ type: tour.STOP });
      } else if (type === EVENTS.STEP_AFTER || type === EVENTS.TARGET_NOT_FOUND) {
        dispatch({
          type: tour.NEXT_OR_PREV,
          payload: { stepIndex: index + (action === ACTIONS.PREV ? -1 : 1) },
        });
      }
    };
  
    // I made this in case there is going to be a functionality to start the tour again by pressing a button or something like that
    const startTour = () =&gt; {
      dispatch({ type: tour.RESTART });
    };
  
    return (
      &lt;div&gt;
        &lt;JoyRide
          {...tourState}
          callback={callback}
          locale={{
            back: &quot;Previous&quot;,
            last: &quot;Confirm&quot;,
          }}
          continuous={true}
          showProgress={true}
          floaterProps={{
            styles: {
              arrow: {
                margin: -10,
              },
            },
          }}
          styles={{
            buttonNext: {
              fontSize: &quot;1rem&quot;,
              height: &quot;32px&quot;,
              width: &quot;71px&quot;,
              backgroundColor: &quot;#4e63ce&quot;,
              letterSpacing: &quot;.5px&quot;,
              borderRadius: &quot;8px&quot;,
              fontWeight: &quot;500&quot;,
              marginLeft: &quot;16px&quot;,
            },
            buttonClose: {
              width: &quot;10.5px&quot;,
              height: &quot;10.5px&quot;,
            },
            buttonBack: {
              fontSize: &quot;1rem&quot;,
              color: &quot;#4e63ce&quot;,
              fontWeight: &quot;500&quot;,
            },
  
            tooltipTitle: {
              marginLeft: &quot;9px&quot;,
              marginTop: &quot;10px&quot;,
              fontSize: &quot;1.8rem&quot;,
            },
            tooltipContent: {
              fontSize: &quot;1.2rem&quot;,
            },
            tooltipContainer: {
              textAlign: &quot;left&quot;,
            },
          }}
        /&gt;
      &lt;/div&gt;
    );
  }
  
  Tour.propTypes = {
    steps: PropTypes.array.isRequired,
  };
  
  export default Tour;
  </code></pre>
  <p>Here's how I want it to look like or here is how it looks like when I set the margin initially:
  <a href="https://i.stack.imgur.com/J2bH0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J2bH0.png" alt="enter image description here" /></a></p>
  <p>Here's what happens when I click next:</p>
  <p><a href="https://i.stack.imgur.com/7j03Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7j03Y.png" alt="enter image description here" /></a></p>
  <p>If you know how to fix this I would gladly appreciate that!</p>