Apologies in advance for the lengthy post, but if you can help, I'd be massively grateful!

I'm trying to build a number of forms (each on its own page) in Visualforce that are made up of sections that I want to have implemented as components, as some sections are reused across multiple forms.

For the sake of discussion, this page is split into two parts, "Top" and "Bottom". In Top are radio buttons that control what is displayed in Bottom. In Bottom is another set of radio butttons that control what is displayed beneath the radio buttons. Here's the Visualforce for a page, let's call it TestComponentUse:

<apex:page controller="APageController" showHeader="false">
    <apex:outputPanel id="TopPanel">
        <apex:form >
            <apex:selectRadio value="{!topRadio}" layout="pageDirection" >
                <apex:selectOptions value="{!topRadioOptions}" />
                <apex:actionSupport event="onclick" rerender="BottomPanel" />
            </apex:selectRadio>
        </apex:form>
    </apex:outputPanel> <!-- End TopPanel-->
    
    <apex:outputPanel id="BottomPanel">
        <apex:outputPanel rendered="{!topRadio == 'option1'}">
            <apex:form id="paymentForm">
                <c:mycustomcomponent></c:mycustomcomponent>
            </apex:form>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!topRadio == 'option2'}">
            Other Content
        </apex:outputPanel>
    </apex:outputPanel>
</apex:page>

And the controller for the page:

public class APageController {
    public String topRadio {get; set;}
    public List<SelectOption> topRadioOptions {get; set;}

    public APageController() {
        topRadioOptions = new List<SelectOption>();
        topRadioOptions.add(new SelectOption('option1', 'Option 1'));
        topRadioOptions.add(new SelectOption('option2','Option 2'));
        topRadio = 'option1';
    }
}

The component mark up (called myCustomComponent, and used in the page above):

<apex:component controller="MyCustomComponentController">                    
    <apex:actionRegion >
        <apex:selectRadio value="{!bottomRadio}"  layout="pageDirection" >
              <apex:selectOptions value="{!bottomRadioOptions}" />
              <apex:actionSupport event="onclick" rerender="belowBottomRadio"/>
        </apex:selectRadio>
    </apex:actionRegion>
    
    <apex:outputPanel id="belowBottomRadio">

        <apex:outputPanel rendered="{!panelARendered}" id="bottomPanelA">
        Content A   
        </apex:outputPanel> <!-- End panelA -->
                         
        <apex:outputPanel rendered="{!panelBRendered}" id="bottomPanelB">
        Content B
        </apex:outputPanel> <!-- End panelB -->
    </apex:outputPanel> <!-- End belowBottomRadio -->
</apex:component>

And the controller for the component:

public class MyCustomComponentController {
    public String bottomRadio {get; set;}
    public List<SelectOption> bottomRadioOptions{get;set;}
    public Boolean panelARendered {get{return bottomRadio == 'optionA';} set;}
    public Boolean panelBRendered {get{return bottomRadio == 'optionB';} set;}
    
    public MyCustomComponentController() {
        bottomRadioOptions = new List<SelectOption>();
        bottomRadioOptions.add(new SelectOption('optionA', 'Option A'));
        bottomRadioOptions .add(new SelectOption('optionB', 'Option B'));
        bottomRadio = 'optionA';
    }
}

So, loading the page in a browser, selecting from the radio button in the top of the page, the bottom part changes as needed. Option 1 shows the two radio button labelled A and B and "content A"; selecting Option 2 shows "Other Content" in place of the bottom set of radio buttons. That part works OK!

However, when option 1 is selected and the second set of radio buttons are shown (Options A and B), selecting the radio buttons doesn't change the content beneath that bottom set of radio buttons. For some reason the rerender doesn't seem to be working. If you select Option B, then Option 2 then back to Option 1, then the correct content is displayed, however it does not dynamically rerender as I believe it should.

I'm sure I'm misunderstanding /something/ that I'm using, so what am I doing wrong?

Many, many thanks in advance...