I can't access to the theme provider into a portal

[elVengador]

I set up my providers:

 <ConfigProvider>
      <ThemeProvider theme={myTheme}> //<-- provider from styled-components
        <App />
      </ThemeProvider>
    </ConfigProvider>

and Im creating a portal

export const SetSelector = ()=>{
  const OptionsModal = useMemo(() => {
      return (
          <Wrapper $theme={configState.theme}>
            <Modal $theme={configState.theme}>
              // more components here, like buttons
            </Modal>
          </Wrapper>
      );
    }, [ . . . ]);
  
    return (
      <ListSelectorWrapper>
        {displayOptions && createPortal(OptionsModal, document.body)}
      </ListSelectorWrapper>
    );
  };
}

My components into my modal can't access to the theme provider from Styled Components, I got this error: Uncaught TypeError: Cannot read properties of undefined (reading '300') which is from a property from my Button

background: ${props=>props.$variant==="flat"?"transparent":props.$theme==="dark"?props.theme.gray[300]:props.theme.gray[600]};

Also, I tried Wrapping in a provider my portal but is not working, I got the same error

const OptionsModal = useMemo(() => {
    return (
      <ThemeProvider theme={myTheme}>
        <WrapperOverlay $theme={configState.theme}>
          <Modal $theme={configState.theme}>
             // more components here, like buttons
          </Modal>
        </WrapperOverlay>
      </ThemeProvider>
    );
  }, [...]);

How Can I access to theme provider values into my portal component?

[elVengador]

Was my mistake, I was accessing in invalid way props.theme.gray[300] instead props.theme.colors.gray[300]