I want to add multiple buttons to TitleBar.

[d-yokosan]

I am translating this text using Deepl.

Hi, I started developing an app for Shopify a few days ago.
In it, I can't figure out how to add multiple buttons to the Titlebar.
I asked in the community, but there was no good solution.
I will write the code, so could you please see if there is a problem?

import { Card, Page, Layout, TextContainer, Heading, Stack, ButtonGroup, Button, RadioButton} from "@shopify/polaris";
import { TitleBar } from "@shopify/app-bridge-react";
import {useState, useCallback} from 'react';

export default function Settings() {
  const [value, setValue] = useState('disabled');

  const handleChange = useCallback(
    (_checked, newValue) => setValue(newValue),
    [],
  );

  function ToolButtons(){
    return (
      <ButtonGroup>
      <Button>設定</Button>
      <Button>エクスポート</Button>
      <Button>インポート</Button>
    </ButtonGroup>
    )
  }
  
  return (
    <Page>
      <TitleBar
        title="設定"
        primaryAction={<ToolButtons />}
      ></TitleBar>
      <div style={{marginTop:'15px'}}>
        <Layout>
          <Layout.Section secondary>
            <TextContainer style={{margintop:'20px'}}>
                <Heading>aaa/Heading>
                <p>aaa</p>
            </TextContainer>
          </Layout.Section>
          <Layout.Section primary>
            <Card sectioned>
              <Stack vertical>
                <RadioButton
                  label="aaa"
                  helpText="aaa。"
                  checked={value === 'review-disabled'}
                  id="review-disabled"
                  name="reviews"
                  onChange={handleChange}
                />
                <RadioButton
                  label="aaaa"
                  helpText=。"
                  id="review-enabled"
                  name="reviews"
                  checked={value === ''}
                  onChange={handleChange}
                />
              </Stack>
            </Card>
          </Layout.Section>
        </Layout>
      </div>
      <div style={{marginTop:'20px'}}>
      <Layout>
        <Layout.Section secondary> 
          <TextContainer>
              <Heading>dada</Heading>
              <p>daddadaa</p>  
          </TextContainer>
        </Layout.Section>
        <Layout.Section primary>
          <Card sectioned>
          </Card>
        </Layout.Section>
      </Layout>
      </div>
      <div style={{marginTop:'50px'}}>
        <Layout>
          <Layout.Section secondary>
            <TextContainer>
                <Heading>star</Heading>
                <p>star </p>
            </TextContainer>
          </Layout.Section>
          <Layout.Section primary>
            <Card sectioned>
              <Stack vertical>
                <RadioButton
                  label="theemcolor "
                  helpText="theme color"
                  checked={value === 'disabled'}
                  id="disabled"
                  name="accounts"
                  onChange={handleChange}
                />
                <RadioButton
                  label="custom color"
                  helpText="select color"
                  id="optional"
                  name="accounts"
                  checked={value === 'optional'}
                  onChange={handleChange}
                />
              </Stack>
            </Card>
          </Layout.Section>
        </Layout>
      </div>

      <div style={{marginTop:'50px'}}>
        <Layout>
          <Layout.Section secondary>
            <TextContainer>
                <Heading>layout change</Heading>
                <p>layout change</p>
            </TextContainer>
          </Layout.Section>
          <Layout.Section primary>
            <Card sectioned>
              <p>test</p>
            </Card>
          </Layout.Section>
        </Layout>
      </div>
      <div style={{marginTop:'50px'}}>
        <Layout>
          <Layout.Section secondary>
            <TextContainer>
                <Heading>text change</Heading>
                <p>text customize</p>
            </TextContainer>
          </Layout.Section>
          <Layout.Section primary>
            <Card sectioned>
              <p>test</p>
            </Card>
          </Layout.Section>
        </Layout>
      </div>
      <div style={{marginTop:'50px'}}> 
        <Layout>
          <Layout.Section secondary>
            <TextContainer>
                <Heading>form change</Heading>
                <p>form customize</p>
            </TextContainer>
          </Layout.Section>
          <Layout.Section primary>
            <Card sectioned>
              <p>テスト</p>
            </Card>
          </Layout.Section>
        </Layout>
      </div>
    </Page>
  );
}
``