Add render to style in React-jsx

Hi, i’m trying to add render to style the app.jsx but actually it apper a Error, if you can help i’d be happy

import React from 'react'
import Badge from 'react-bootstrap/Badge'


function App() {
  
render(){
  var inputStyle = {
    width: "400px",
    height: "50vh",
    marginLeft: "auto",
    marginRight: "auto",
    padding:"10px"
  }


  return (
    <div className="App">
      <div className='container'>
        <div className='row mt-4'>
          <div className='col text-center'>
       <h1>
        <Badge className='text-align-center' variant="light"  >
          Markdown Previewer 
        </Badge>
       </h1>
       </div>
       </div>
       <div className='row mt-4'>
        <div className='col-md-6'>
          <h4>
            <Badge className='text-align-center' variant="secondary">
              Markdown Input
            </Badge>
          </h4>
          <div className='mark-input'>
            <textarea className='input'></textarea>
          </div>
          </div>

          <div className='col-md-6'>
        <h4>
        <Badge className='text-align-center' variant="secondary">
         Preview
        </Badge>
        </h4>
        </div>
        
       </div>
       </div>
      </div>
  )

}
}

export default App

The render method isn’t used with functional components, only class components.