UseContext не работает в том же файле

Так что не уверен, что это именно проблема, но интересно, почему это происходит при использовании контекстов в одном и том же файле по сравнению с разными файлами.

Итак, вот константа:

StartupContext.js

import React from "react";

export const StartupContext = React.createContext()

export const StartupProvider = ({ something, children }) => {
    return (
        <StartupContext.Provider value = {{ something }}>
            {children}
        </StartupContext.Provider>
    )
}

Там нет проблем. Но когда я запускаю это:

App.js

function Root() {
  const { something } = useContext(StartupContext);

  return (
    <Text>Root {something}</Text>
  )
}

export default function App() {
  const [something, setSomething] = useState("ayyyy")

  return (
    <StartupProvider something = {something}>
      <Root />
    </StartupProvider>
  );
}

Я получу эту ошибку:

TypeError: undefined is not an object (evaluating 'Context._context')

НО

Если я разделю на два файла

App.js

import { Root } from "./Root";

export default function App() {
  const [something, setSomething] = useState("ayyyy")

  return (
    <StartupProvider something = {something}>
      <Root />
    </StartupProvider>
  );
}

Root.js

export default function Root() {
  const { something } = useContext(StartupContext);

  return (
    <Text>Root {something}</Text>
  )
}

Это будет работать просто отлично. Почему это происходит?