Antd Affix offsetBottom={50} not doing anything

Question

I have a system like this:

import React, { useState } from 'react';
import { Affix, Button } from 'antd';

const Demo: React.FC = () => {
  return (
    <>
      <div style={{ height: '5000px' }}>Tall Table</div>
      <Affix offsetBottom={50}>
        <Button type="primary">
          Affix bottom
        </Button>
      </Affix>
    </>
  );
};

ReactDOM.render(<Demo />, mountNode);

Basically, I have a super long table which stretches beyond the viewport. However, adding the Affix doesn't appear to be doing anything. How do I get the Button to be at the bottom of the the browser viewport, until we scroll to the bottom of the table (whereafter it is below the table)?