How do I extract a portion of JSX into its own method?

Given I have the following:

export default class Blah extends React.Component {
   render() {
      return (
         <div>
            <div>
               <div>foo</div>
            </div>
            <div>
               <div>bar</div>
            </div>
            <div>
               <div>baz</div>
            </div>
         </div>
      )
   }
}

When I extract to method the entire contents of the `return`, I get the following expected result when I choose `Blah` as the scope:

export default class Blah extends React.Component {
   render() {
      return (
         this.extracted()
      )
   }

   extracted() {
      return <div>
         <div>
            <div>foo</div>
         </div>
         <div>
            <div>bar</div>
         </div>
         <div>
            <div>baz</div>
         </div>
      </div>;
   }
}

However, when I try to extract a child `div`, I don't get the option to choose which scope I want, and I get this:

export default class Blah extends React.Component {
   render() {
      return (
         <div>
            <div>
               <div>foo</div>
            </div>
            <div>
               <div>bar</div>
            </div>
            {baz()}
         </div>
      )
   }
}

It didn't create my method, it just replaced the selection with the method name I gave it.

Why is this happening, and how can I ensure when I extract a child `div` it achieves the following?

export default class Blah extends React.Component {
   render() {
      return (
         <div>
            <div>
               <div>foo</div>
            </div>
            <div>
               <div>bar</div>
            </div>
            {this.baz()}
         </div>
      )
   }
   
   baz() {
      return (
         <div>
            <div>baz</div>
         </div>
      )
   }
}