[Proyecto] Necesito ayuda en mi código de AluraGeek

tengo este archivo llamado Categories.jsx con este siguiente codigo:

import styled from "styled-components";
import CategoryContent from "./CategoryContent";
import { v4 as uuidv4 } from "uuid";

const CategoryContainer = styled.main`
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`
const CategoryTitle = styled.h1`
  text-align: center;
  font-size: 7rem;
  font-family: 'Roboto Mono', monospace;
  text-shadow: 5px 5px 5px rgba(255,255,255, 30%);
  padding: 40px 0 40px 0;
`
const CategoriesSection = styled.section`
  border: 1px solid rgba(255,255,255, 30%);
  border-radius: 5px;
  height: auto;
  margin-bottom: 40px;
  width: 95%;
`
const Categories = () => {
  const categoryList =[{
    title:"Videos",
    id:uuidv4(),
  },
  {
    title:"Music",
    id:uuidv4(),
  },
  {
    title:"Images",
    id:uuidv4(),
  },
  {
    title:"Gits",
    id:uuidv4(),
  }]
  return (
  <CategoryContainer>
      <CategoryTitle>Categories</CategoryTitle>
      <CategoriesSection>
        {
          categoryList.map((category) => {
            return(
              <CategoryContent
              key={category.id}
              title={category.title}/>
            )
          })
        }
      </CategoriesSection>
  </CategoryContainer>
  );
};
export default Categories

y luego tengo este otro archivo llamado nuevoVideo.jsx con el siguiente código:

import { ContenedorFormulario, Title, Form, ContainerInputs } from "../../nav/container/Styles/styleComponents";
import { useState } from "react";
import styled from "styled-components";
import Inputs from '../../nav/container/components_of_container/Inputs';
import Buttons from '../../nav/container/components_of_container/Buttons';
import SecurityCode from '../../nav/container/components_of_container/SecurityCode';
import Textarea from '../../nav/container/components_of_container/Textarea';
import InputOptions from '../../nav/container/components_of_container/InputOptions';
import Categories from "../section-categories/categories";

const ContenedorBotones = styled.div`
  display:flex;
  gap: 1rem;
`
const NuevoVideo = () => {
  const [inputsDatos, setInputsDatos] = useState({
    title:"",
    video:"",
    image:"",
    comments:"",
    securityCode:"",
  });
  const [listOptions, setListOptions] = useState()
  const categoryList =[
    "Videos",
    "Music",
    "Images",
    "Gits",
  ]
  function handleChangeInputs({target}){
    const {name, value} = target
    setInputsDatos({
      ...inputsDatos,
      [name]: value
    })
  }
  function handleChangeList(event){
    setListOptions(event.target.value)
  }
  function handleSubmit(event){
    event.preventDefault()
    let datosAEnviar = {
      inputsDatos,
      listOptions
    }
    console.log(datosAEnviar)
  }
  return(
  <ContenedorFormulario>
    <Title>Nuevo video</Title>
    <Form onSubmit={handleSubmit}>
      <ContainerInputs>
        <Inputs
          type="text" 
          value={inputsDatos.title}
          name="title" 
          placeholder="title"
          handleChangeInputs={handleChangeInputs} />
        <Inputs 
          type="text"
          value={inputsDatos.video}
          name="video" 
          placeholder="Link video"
          handleChangeInputs={handleChangeInputs} />
        <Inputs 
          type="text"
          value={inputsDatos.image}
          name="image" 
          placeholder="Link image"
          handleChangeInputs={handleChangeInputs} />
        <InputOptions 
          listOptions={listOptions}
          handleChangeList={handleChangeList}
          categoryList={categoryList}/>
        <Textarea
          value={inputsDatos.comments}
          placeholder="add a comment"
          handleChangeInputs={handleChangeInputs}
          name="comments" />
        <SecurityCode
          type="text"
          value={inputsDatos.securityCode}
          name="securityCode" 
          placeholder="Enter a security Code (xxxx)"
          handleChangeInputs={handleChangeInputs}/>
        <ContenedorBotones>
          <Buttons 
            text="save" 
            type="submit">
          </Buttons>
          <Buttons 
            text="clear" 
            type="reset">
          </Buttons>
          <Buttons 
            text="new_category">
          </Buttons>
        </ContenedorBotones>
      </ContainerInputs>
    </Form>
  </ContenedorFormulario>
  );
}
export default NuevoVideo

lo que necesito es poder enviar los datos del formulario a Categories.jsx, el problema que veo es que ninguno está conectado con un padre. Ya que ambos son padres y envían props a sus hijos. hay alguna manera que al momento de dar click al boton save estos datos se me guarden de una forma global para cualquier componente sin importar si esta unidos