React Memo рендерится каждый раз с одними и теми же реквизитами

Вы каждый раз передаете реквизит новыйtoggleHamburger.

На самом деле это самый распространенный убийца производительности в приложениях React, который я видел. Каждый раз передавая новое замыкание в качестве обработчика событий/обратного вызова.

Для решения этой проблемы я бы рекомендовал хук useCallback() или, в вашем случае, метод, так как внешний компонент — это класс:

class ... {
  toggleHamburger = () => this.setState(({toggle}) => ({toggle: !toggle}));
  ...
    <HamburgerButton toggleHamburger = {this.toggleHamburger} />
}

Компонент, обернутый React.memo(), будет отображаться только один раз, если он вызывается с реквизитами такой же:

const Comp = React.memo(props => {
  console.info('Rendering...');
  return props.a;
});

const props = {a: 1};
const at = document.getElementById('app');
render();
render();
render();

function render() {
  console.info('Called render()'); 
  ReactDOM.render(<Comp {...props} />, at);
}

<div id = "app"></div>
<script src = "//unpkg.com/react/umd/react.production.min.js"></script>
<script src = "//unpkg.com/react-dom/umd/react-dom.production.min.js"></script>

    export default class extends Component {
  shouldComponentUpdate(nextProps) {
    const { toggle } = this.props;
    return nextProps.toggle !== toggle;
  }

  render() {
    console.info('Rendering ...');
    const { toggleHamburger, toggle } = this.props;
    return (
      <svg viewBox = "0 0 96 96" height = "1em" onClick = {toggleHamburger} {...{ style }}>
        <Motion
          style = {{
            x: spring(toggle ? 1 : 0, presets.wobbly),
            y: spring(toggle ? 0 : 1, presets.wobbly)
          }}
        >
          {({ x, y }) => (
            <g
              id = "navicon"
              fill = "none"
              stroke = "currentColor"
              strokeWidth = "14"
              strokeLinecap = "round"
              strokeLinejoin = "round"
            >
              <line
                transform = {`translate(${x * 12}, ${x * -7}) rotate(${x * 45}, 7, 26)`}
                x1 = "7"
                y1 = "26"
                x2 = "89"
                y2 = "26"
              />
              <line
                transform = {`translate(${x * 12}, ${x * 7}) rotate(${x * -45}, 7, 70)`}
                x1 = "7"
                y1 = "70"
                x2 = "89"
                y2 = "70"
              />
              <line
                transform = {`translate(${x * -96})`}
                opacity = {y}
                x1 = "7"
                y1 = "48"
                x2 = "89"
                y2 = "48"
              />
            </g>
          )}
        </Motion>
      </svg>
    );
  }
}