Rebass not picking up values defined in Theme ui theme

Question

My index file where I wrap the App component with the ThemeProvider

Index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from 'theme-ui';
import App from './App';
import {theme}  from './theme';

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

I define my theme

theme.ts

import { Theme } from "theme-ui";

export const theme : Theme = {
  colors: {
    primary:"green"
  }
}

Here is my App component where I am creating a Rebass button component.

App.tsx

import React from "react";
import { Button } from "rebass";

function App() {
  return (
    <Button color="primary">hello</Button>
  );
}

export default App;

The button is not picking up the primary color defined in my theme. Does anyone know why?