React - passing and receiving value between 2 components

Question

//passing similarPropsData value
function SimilarPropertiesComponent({ listingProperties }) {
  const [similarPropsData, setData] = useState([]);

//JSX
return (
<React.Fragment>
  //need to pass this
  {similarPropsData.length > 0 && (
    <div className="detail-similar-prop" id="similar-listing-expiry">
....


//receiving similarPropsData
class MainComponent extends React.Component {
  static contextType = AuthContext;
  
  constructor(props) {
  super(props);
  this.columnSideRef = React.createRef();
  this.transactionRef = React.createRef();
  this.stickyRef = React.createRef();
  this.state = {
  width: 0,
  openShortlistModal: false,
  shortlistCount: 0,
  nearbyAmenities: {},
  transcBtn: true,
  headerChange: false,
  similarPropsData: [], // Add similarPropsData state
};

//JSX
render() {
  const { data, listingProperties, similarPropsData } = this.props;

{similarPropsData && similarPropsData.length > 0 && (
  <span>View Similar Properties</span>
)}