我无法弄清楚我可以在我的功能中更好地实现什么，也不确定如何执行最后一部分

Question

我正在学习如何使用 React。 到目前为止，我有许多组件可以呈现电影列表及其各自的信息。 有这个组件配置文件，我无法弄清楚如何使用和正确渲染它。 我导入了 useEffect、useState、Col、Row、Button、Card、Container、axios。 我正在从我的 API 中获取信息。

export const TestProfile= ({user, movies, token}) => {
    //    update user dunction
        const [formData, setFormData] = useState({
                username: user.username,
                password: user.password,
                email: user.email,
                birthday: user.birthday
            });
            const handleSubmit= event => {
                event.preventDefault();
                const token = localStorage.getItem("token");
                axios.put(`https://movies-couch-api.vercel.app/users/${user.username}`,
                formData,
                {headers: {Authorization: `Bearer ${token}`}}
                )
                .then((response) =>{
                    console.log(response.data);
                    alert("Profile updated!");
                    window.open(`/users/${user.username}`, "_self");
            })
            .catch(function (error) {
                console.log(error);
            });
            const handleChange = event => {
                const name = event.target.name;
                const value = event.target.value;
                setFormData(prevState => ({...prevState, [name]: value})); 
            }
            useEffect(() => {
                editUser({user, token});
            }, [])
            function editUser({user, token})  {
                
        }

然后我返回一个包含两行的 Container 组件。一个检索从定义的道具（用户）中提取的用户信息。

export const TestProfile= ({user, movies, token}) => {...

为了详细说明，该应用程序的想法是拥有某种呈现电影组件（电影视图和卡片、登录和注册视图）的 netflix 应用程序（演示），我正在处理用户配置文件视图。 有没有人有更好的建议？我需要提供更多更好的应用程序图片吗？

提前感谢任何想法或想法。