React入门自定义组件示例代码无法正常运行的原因咨询

• 学士学位论文撰写期间开始学习React，需要非通用常规化的代码示例，求助解释下述代码无法正常运行的原因。

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greetings(props){
    return <h1> hello!  {props.name}</h1>;
}

const element = <Greetings name ='Sarah' />;
document.getElementById('root').innerHTML = element.props(name);

• 语法逻辑错误：JSX写法生成的element是React内部构造的用于描述UI的普通JS对象，不是可执行函数。element.props是存储组件所有传入参数的对象，并非可调用的函数，element.props(name)的写法完全不符合JS语法规则，运行时会直接抛出「props is not a function」的类型错误。
• 渲染逻辑错误：即使修正props的访问写法，原生DOM的innerHTML属性仅支持传入HTML字符串，无法识别React元素对象，直接赋值只会在页面渲染出无意义的[object Object]文本，无法得到预期的组件效果。且代码中已经引入React18版本的react-dom/client包，却完全没有使用官方提供的标准挂载渲染API，不符合React的基本运行规则。

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greetings(props){
    return <h1> hello!  {props.name}</h1>;
}

// 按照React18标准API创建根节点，完成组件挂载
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Greetings name='Sarah' />);

内容的提问来源于stack exchange，提问作者Bruno Stojaković